?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>排序动态展示</title>
<style>
#sortbox,sortbox_quick{
position:relative;
height:200px;
margin-top:10px;
}
.tow{
position:absolute;
bottom:0px;
width:10px;
background-color:green;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#show{
font:14px/100% Arial;
position:absolute;
top:5px;
right:5px;
font-weight:bold;
color:#feeef5;
cursor:pointer;
border:solid 1px #d2729e;
background:#f895c2;
background:-webkit-gradient(linear,left top,left bottom,from(#feb1d3),to(#f171ab));
background:-moz-linear-gradient(top,#feb1d3,#f171ab);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');
padding:3px 9px;
-webkit-border-radius:.5em;
-moz-border-radius:.5em;
border-radius:.5em;
box-shadow:0 1px 2px rgba(0,0,0,.2);
text-shadow:0 1px 1px rgba(0,0,0,.3)
}
</style>
</head>
<body>
<div id="sortbox">
</div>
<div id="sortbox_quick">
</div>
<div id="show">
show
</div>
<script>
var Dom = {
get:function(id){
return document.getElementById(id);
}
}
var Sort = {
randomArray:(function(){
// 随即生成1到100的打乱的数组，这个算法是跟JK学习的，也算是一种洗牌算法，感觉不错，谢谢JK
var i,
len = 100,
oldsource = new Array(len);
for(i=0;i < len ;i++){
var random = Math.floor(Math.random()*(i+0.9999));
oldsource[i] = oldsource[random];
oldsource[random] = i+1;
}
return oldsource;
}()),
bubbleArray:[],
init:function(){
var sourcearray = this.randomArray,
html = [],
html_quick = [];
for(var i = 0 , len = sourcearray.length ; i < len ; i ++){
html.push('<div id="tow'+i+'" class="tow" style="left:'+(10+1)*i+'px;height:'+2*sourcearray[i]+'px"></div>');
html_quick.push('<div id="tow_quick'+i+'" class="tow" style="left:'+(10+1)*i+'px;height:'+2*sourcearray[i]+'px"></div>');
}
Dom.get("sortbox").innerHTML = html.join("");
Dom.get("sortbox_quick").innerHTML = html_quick.join("");
Dom.get("show").onclick = function(){Sort.show()};
},
bubbleSort:function(array){
var clonearray = array;
var i = 0, len = clonearray.length,
j, d,anim=[];
for(; i<len; i++){
for(j=0; j<len; j++){
if(clonearray[i] < clonearray[j]){
d = clonearray[j];
clonearray[j] = clonearray[i];
clonearray[i] = d;
if( i != j)
anim.push([i,j]);
}
}
}
return anim;
},
quickSort:function(array){
//完全按照这种算法的说明写的，之前看到的这种代码实际上经过了一些小的修改，然后我改回来之后也方便了之后的动态展示
var i = 0;
var j = array.length - 1;
var anim = [];
var keyi = null,tt = null;
var Sort = function(i, j){
// 结束条件
if(i == j ){ return };
var key = array[i];
keyi = i;
var stepi = i; // 记录开始位置
var stepj = j; // 记录结束位置
while(j > i){
// j <<-------------- 向前查找
if(array[j] >= key){
j--;
}else{
array[i] = array[j];
var oldj = j;
array[j] = key;
keyi = j;
anim.push([i,j]);
//i++ ------------>>向后查找
while(j > ++i){
if(array[i] > key){
array[j] = array[i];
array[i] = key;
keyi = i;
//array[i] = key;
anim.push([j,i]);
break;
}
}
}
}
// 如果第一个取出的 key 是最小的数
if(stepi == i){
Sort(++i, stepj);
return ;
}
// 递归
Sort(stepi, i);
Sort(j, stepj);
}
Sort(i, j);
return anim;
},
show:function(){
var anim = this.bubbleSort((function(){
var a = [];
for(var i = 0 ; i < Sort.randomArray.length ; i++){
a.push(Sort.randomArray[i]);
}
return a;
})()),
anim_quick = this.quickSort(Sort.randomArray);
//for(var i = 0 , len = anim.length ; i < len ;){
var i = 0,
j = 0;
var tt = setInterval(function(){
if(anim_quick[j]){
var tmp = parseInt(Dom.get("tow_quick"+anim_quick[j][0]).style.height);
Dom.get("tow_quick"+anim_quick[j][0]).style.height = parseInt(Dom.get("tow_quick"+anim_quick[j][1]).style.height)+"px";
Dom.get("tow_quick"+anim_quick[j][1]).style.height = tmp+"px";
//console.log(i);
j++;
}else{
clearInterval(tt);
}
},10);
var t = setInterval(function(){
if(anim[i]){
var tmp = parseInt(Dom.get("tow"+anim[i][0]).style.height);
Dom.get("tow"+anim[i][0]).style.height = parseInt(Dom.get("tow"+anim[i][1]).style.height)+"px";
Dom.get("tow"+anim[i][1]).style.height = tmp+"px";
//console.log(i);
i++;
}else{
clearInterval(t);
}
},10);
//}
}
}
Sort.init();
</script>
</body>
</html>