<!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{
background: white;
width: 297px;
height: 310px;
border-right: 3px solid #EEE9E9;
#view img{
margin: 8px 23px 0 25px ;
#view b{
color: #4169E1;
display:inline-block;
margin: 0px 23px 0 25px;
width:250px;
height: 41px;
line-height: 41px;
font-size: 20px;
</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{
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">
<li>
<!--改變圖檔路徑
<code><</code><code>br</code><code>></code>
-->
<img src="images/PX_1.jpg"/>
<b><em>1</em>:螢火之森--竹川蛍</b>
</li>
<img src="images/PX_2.jpg"/>
<b><em>2</em>:螢火之森--銀</b>
<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>
</body>
</html>
本文轉自 沉迷學習中 51CTO部落格，原文連結：http://blog.51cto.com/12907581/1924477，如需轉載請自行聯系原作者
![Oracle索引内部結構研究[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)