当前位置：Gxlcms > JavaScript > js排序动画模拟-插入排序

js排序动画模拟-插入排序

时间：2021-07-01 10:21:17 帮助过：21人阅读

<!DOCTYPE html"> 
<html>

<style></style> 
<script><!--

window.onload = function(){ 
var mop = document.getElementById("mop"),frag = document.createDocumentFragment(); 
(function(){ 
var li , a; 
for(var i = 0; i < 25; i++){ 
li = document.createElement("li");//YI.newLi({className:"fac",id:"f" + i})[0]; 
li.className = "fac"; 
li.id = "f" + i; 
a = document.createElement("a"); 
li.appendChild(a); 
frag.appendChild( li ); 
} 
mop.appendChild(frag); 
})();

var facs = document.getElementsByTagName("li"), set = [], steps = []; 
jOne.each(facs,function(i){ 
var hsb="rgb(" +rand(0, 200)+","+ rand(50, 250) + ", " + rand(50, 200) + ")",// 
h = rand(100, 500); 
set.push(h); 
jOne.setStyle(this, {height:h + "px",left:i * 25+300}); 
jOne.setStyle(this.children[0], {background:hsb,width:"25px",height:h + "px"}); 
});

var queue = []; 
var bub = bubble(); 
bub.sort(set,queue); 
var dq = createDq(); 
dq.setDq(queue); 
dq.run(function(){ 
var reg = /(\:)|(\^)|(\-)/,arg = arguments[0],ids, elem1, elem2, 
ret = arg.match(reg); 
if(ret[1]){ 
ids = arg.split(/\:/); 
elem2 = document.getElementById("f" + ids[1]); 
dq.setCl( elem2.children[0] ); 
return; 
} 
if(ret[2]){ 
ids = arg.split(/\^/); 
elem1 = document.getElementById("f" + ids[0] ); 
if(ids[0] == ids[1]) return; 
var cl = dq.getCl(); 
if(elem1.children.length ){ 
elem1.removeChild(elem1.children[0]); 
elem1.appendChild(cl); 
}else{ 
elem1.appendChild(cl); 
} 
return; 
} 
if(ret[3]){ 
ids = arguments[0].split(/\-/); 
elem1 = document.getElementById("f" + ids[0] ); 
elem2 = document.getElementById("f" + ids[1] ); 
if(ids[0] == ids[1]) return; 
if(elem1.children.length){ 
elem1.removeChild(elem1.children[0]); 
elem1.appendChild(elem2.children[0]); 
}else{ 
elem1.appendChild(elem2.children[0]); 
} 
} 
}); 
};

function createDq(){ 
var dq = [], size = 0, cl; 
return { 
setDq:function(queue){ 
dq = queue; 
size = queue.length; 
}, 
queue:function(fn){ 
size ++; 
dq.push(fn); 
}, 
dqueue:function(){ 
size --; 
return dq.shift(); 
}, 
run:function(fn){ 
var me = this, timer;

timer = setInterval(function(){ 
if(size <= 1){ 
clearInterval(timer); 
} 
fn.call(null,me.dqueue()); 
},100); 
}, 
setCl:function(elem){ 
cl = elem; 
}, 
getCl:function(){ 
return cl; 
} 
} 
}

function bubble(){ 
var obs = []; 
return { 
addOb:function(ob){ 
obs.push(ob); 
}, 
sort:function(arr,q){ 
var len = arr.length, i = 1, j, t, cl; 
for(; i < len; i++){ 
t = arr[i]; 
q.push("clone:" + i); 
j = i ; 
while(j >0 && (t < (arr[j - 1]))){ 
q.push(j + "-" + (j - 1)); 
arr[j] = arr[j-1]; 
j--; 
} 
q.push(j + "^" + i); 
arr[j] = t; 
} 
}//sort 
}//return 
} 
var jOne = { 
each:function(obj,callback){ 
var i = 0,len = obj.length; 
for(var value = obj[0]; 
i < len && callback.call(value,i,value) !==false ; 
value = obj[ ++i ] ){}; 
}, 
setStyle:function(elem, opt){ 
var o, sty = elem.style; 
for(var o in opt){ 
sty[o] = opt[o] 
} 
} 
} 
function rand(a, b){ 
var ret = Math.random() * (b - a) + a; 
return ret >> 0; 
}

//--></script> 
<ul id="mop"></ul> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

人气教程排行