码迷,mamicode.com
首页 > 编程语言 > 详细

初识数组排序!!!!

时间:2017-05-11 22:38:15      阅读:385      评论:0      收藏:0      [点我收藏+]

标签:background   parent   border   

<!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>

本文出自 “12897581” 博客,请务必保留此出处http://12907581.blog.51cto.com/12897581/1924476

初识数组排序!!!!

标签:background   parent   border   

原文地址:http://12907581.blog.51cto.com/12897581/1924476

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!