溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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="p_w_picpaths/PX_1.jpg"/>
<b><em>1</em>:螢火之森--竹川蛍</b>
</li>
<li>
<img src="p_w_picpaths/PX_2.jpg"/>
<b><em>2</em>:螢火之森--銀</b>
</li>
<li><img src="p_w_picpaths/PX_3.jpg"/>
<b><em>3</em>:銀色的果實--樹</b></li>
<li><img src="p_w_picpaths/PX_4.jpg"/>
<b><em>4</em>:銀色的果實--風</b></li>
<li><img src="p_w_picpaths/PX_5.jpg"/>
<b><em>5</em>:進擊的巨人--三笠</b></li>
<li><img src="p_w_picpaths/PX_6.jpg"/>
<b><em>6</em>:櫻花櫻花--面碼</b></li>
<li><img src="p_w_picpaths/PX_7.jpg"/>
<b><em>7</em>:未知--粉桃</b></li>
<li><img src="p_w_picpaths/PX_8.jpg"/>
<b><em>8</em>:未知--黑直</b></li>
</ul>
</div>
</div>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
