溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

初識數(shù)組排序!!!!

發(fā)布時間：2020-07-20 07:26:08 來源：網(wǎng)絡(luò) 閱讀：379 作者：沉迷學(xué)習(xí)中 欄目：開發(fā)技術(shù)

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>初識數(shù)組排序</title>

<!--調(diào)試成功-->

<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之間的隨機(jī)數(shù)

function stochastic(x,y){

//四舍五入和0-1之間的隨機(jī)數(shù)

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>:銀色的果實(shí)--樹</b></li>

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

<b><em>4</em>:銀色的果實(shí)--風(fēng)</b></li>

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

<b><em>5</em>:進(jìn)擊的巨人--三笠</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>

附件：http://down.51cto.com/data/2366649
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手