初识数组排序!!!!

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>初识数组排序</title>

<!--调试成功-->

<style type="text/css">

*{

padding:0;

margin: 0;

}

li,ul{

list-style: none;

}

#parent{

margin: 0 auto;

margin-top: 100px;

width: 68%;

height:750px;

border:2px solid #E5E5E5;

background:#EBEBEB;

}

#caozuo{

height: 100px;

}

#caozuo ul{

padding-top: 40px;

padding-left: 500px;

}

#caozuo li{

float: left;

margin-left: 10px;

width: 100px;

height: 30px;

background: #008B8B;

color: white;

text-align: center;

line-height: 30px;

cursor: pointer;

}

#view ul{

margin: 0 40px;

}

#view li{

float: left;

background: white;

width: 297px;

height: 310px;

border-right: 3px solid #EEE9E9;

}

#view img{

margin: 8px 23px 0 25px ;

float: left;

}

#view b{

color: #4169E1;

background:#EBEBEB;

display:inline-block;

margin: 0px 23px 0 25px;

width:250px;

height: 41px;

text-align: center;

line-height: 41px;

font-size: 20px;

float: left;

}

</style>

<script type="text/javascript">

function shijian(a){

var parent = document.getElementById("view");

var son =parent.getElementsByTagName("ul")[0];

var li = son.getElementsByTagName("li");

if(a==1){

for(var i=0;i<li.length;i++){

son.insertBefore(li[stochastic(0,7)],li[stochastic(0,7)]);

}

}else{

for(var i=0;i<li.length;i++){

var kaiguan=false;

var index=0;

var num =parseInt(li[i].getElementsByTagName("em")[0].innerHTML);

for(var j=i+1;j<li.length;j++){

var two =parseInt(li[j].getElementsByTagName("em")[0].innerHTML);

if(num>two){

num=two;

index=j;

kaiguan=true;

}

}

kaiguan&&son.insertBefore(li[index],li[i]);

//kaiguan&&insertAfter(li[index],li[i]);

}

}

}

//返回一个X-Y之间的随机数

function stochastic(x,y){

//四舍五入和0-1之间的随机数

return Math.round(Math.random()*(y-x)+x);

}

</script>

</head>

<body>

<div id="parent">

<div id="caozuo">

<ul>

<li onclick="shijian(0)"><b>从大到小</b></li>

<li onclick="shijian(1)"><b>打乱顺序</b></li>

</ul>

</div>

<div id="view">

<ul>

<li>

<!--改变图片路径


-->

<img src="images/PX_1.jpg"/>

<b><em>1</em>:萤火之森--竹川蛍</b>

</li>

<li>

<img src="images/PX_2.jpg"/>

<b><em>2</em>:萤火之森--银</b>

</li>

<li><img src="images/PX_3.jpg"/>

<b><em>3</em>:银色的果实--树</b></li>

<li><img src="images/PX_4.jpg"/>

<b><em>4</em>:银色的果实--风</b></li>

<li><img src="images/PX_5.jpg"/>

<b><em>5</em>:进击的巨人--三笠</b></li>

<li><img src="images/PX_6.jpg"/>

<b><em>6</em>:樱花樱花--面码</b></li>

<li><img src="images/PX_7.jpg"/>

<b><em>7</em>:未知--粉桃</b></li>

<li><img src="images/PX_8.jpg"/>

<b><em>8</em>:未知--黑直</b></li>

</ul>

</div>

</div>

</body>

</html>

时间: 2024-10-22 18:05:17

初识数组排序!!!!的相关文章

初识Python,望君多多关照

在学习Python之前,我们接触过数据结构和网页制作.前者让我们学习如何把C语言运用的更加整齐规范,而后者让我们亲身学习如何运用所学,制作一个静态网页.通过这些课程的学习,让我对C语言产生了比较大的压力,以至于对编程.对这学期的Python课程都有一种如临大敌的感觉. 但是真的学习了这门课程,体会了编码过程中的一些固定运用方法和套路之后,也许过程中对这门课程隐隐约约产生了一点点朦胧的感觉,仿佛他也并没有想象中的那么困难,起码现在的学习让我认为,他可能没有C语言那么繁琐和麻烦.当然,以一个初学者的

初识操作系统和linux

初识操作系统和linux 1.计算机系统由硬件系统和软件系统两大部分组成:是一种能接收和存储信息,并按照存储在其内部的程序对海量数据进行自动.高速地处理,然后把处理结果输出的现代化智能电子设备. 2.世界上第一台计算机是1946年诞生在美国宾州大学. 3.冯·诺依曼体系结构:1946年数学家冯·诺依曼于提出计算机硬件系统由运算器.控制器.存储器.输入设备.输出设备.摩根定律:当价格不变时,集成电路上可容纳的元器件的数目,约每隔18-24个月便会增加一倍,性能也将提升一倍.现在计算机技术进本很难遵

JAVA 初识类加载机制 第13节

JAVA 初识类加载机制 第13节 从这章开始,我们就进入虚拟机类加载机制的学习了.那么什么是类加载呢?当我们写完一个Java类的时候,并不是直接就可以运行的,它还要编译成.class文件,再由虚拟机解释给当前的操作系统去执行.这些过程都是我们看不见的,我们能看见的也就是一个.class文件.既然虚拟机要解释这些.class文件给当前的操作系统听,那么他怎么获得这些.class文件呢?虚拟机获得这些.class文件的过程就是类加载了. 所以,总结来说就是:虚拟机将.class文件从磁盘或者其他地

NSSortDescriptor对象进行数组排序

//创建一个数组 NSArray *array = @[@"zhangsan", @"lisi", @"zhonger", @"zhubada", @"honghunag"]; //创建一个排序条件,也就是一个NSSortDescriptor对象 //其中第一个参数为数组中对象要按照什么属性来排序(比如自身.姓名,年龄等) //第二个参数为指定排序方式是升序还是降序 //ascending  排序的意思,默

初识React

原文地址:北云软件-初识React 专注于UI 在MVC分层设计模式中,react常被拿来实现视图层(V).React不依赖于技术栈的其他部分,因此可以方便的在现有项目中尝试用它来实现一个小特性. 虚拟DOM React从DOM中抽象出来,给出一种更简洁的编程模型,且性能表现更好.能够通过NodeJS实现服务端渲染,通过React Native开发原生app. 数据流React实现单向.响应式数据流,减少boilerplate且比传统数据绑定更容易理解. 简洁的组件React的组件都实现了一个r

泛型的几种类型以及初识webform

今天学习的可以分为两类吧,但是学习的都是比较抽象的,不太容易掌握吧.首先我们大部分时间学习了泛型,泛型的委托,泛型接口以及枚举器,迭代器,扩展方法:最后简单的认识了webform,实现了一个简单的功能. 一.泛型 定义:泛型(generic)可以软糖多个类型共享一组代码,泛型允许我们声明类型参数化.可以用不同的类型进行实例化,说白了,就是可以用类型占位符,创建具体类型致命的真实概念.C#中提供了五种泛型,类,结构,接口,委托和方法.下面举例说明可能更容易理解, class MyStack<T>

JavaScript - Array对象的使用 及 数组排序 sort

<html> <head> <head> <body> <script language="javascript"> // Array对象 // 第一种构造方法 var arr = new Array(); alert(arr.length); arr[0] = 520 ; arr[1] = "wjp" ; alert(arr.length); // 第二种构造方法 // Array(4) ; // 第三种

最新计算机技术与管理科学应用专家——初识ERB

ERB管理系统:英文全称Enterprise Resource and Behavior,英文简称:ERB,中文名全称:企业资源与行为管理系统.ERB是由理文企业管理顾问有限公司首席管理师,现任商翼ERB企业管理系统项目总监吴志华先生,于2010年9月首先提出的.ERB不再单以供应链管理作为系统应用的基础,而是以企业行为与企业资源规划的最佳结合作为系统应用设计的核心基础,强调企业行为的规划.执行.监督与追溯,强调企业管理水平与员工素养的持续提升:提供企业行为与企业资源管理最佳结合的整体应用解决方

[OpenGL]环境搭建以及OpenGL初识

想往游戏行业发展的话,经常被提及到的就是OpenGL和DirectX,这两者听起来感觉是一门挺高深的技术,今天我也开始摸索学习OpenGL,那么OpenGL到底是什么?它和DirectX有什么区别和联系? OpenGL初识 OpenGL只是一套图形函数库 DirectX包含图形.声音.输入.网络等模块. 但就图形而论,DirectX的图形库性能不如OpenGL,OpenGL稳定,可以跨平台使用,DirectX只支持Windows平台,所以OpenGL还是有它的优势!OpenGL ES是OpenG