js 排序demo

wuzijingaip

浏览: 329896 次
性别:
来自: 广州

最近访客更多访客>>

jerry_shen

xsjwan

wmyydyzyq

lijun1191997

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

J#CSS HTML XHTML

<!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> 
<style type="text/css"> 
*{font-family:Arial, Helvetica, sans-serif}
.div1{ 
background-color:#35BDDB; 
float:left; 
margin-left:1px;
color:#fff;
vertical-align:middle;
font-size:12px;
}
.sorted{
	background-color:#CFD0D2}
#content{ width:100%; height:601px; background-color:#222222; text-align:center; }
</style> 
<script type="text/javascript" src="jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
var numbs = [];
var numbers = 40;
var divWidth = Math.floor(1000/numbers);
var ti = 1;
var step = 0;
var step1 = 0;
function init(){
	step1 = 0;
	numbers = $("#numb").val();
	if(isNaN(numbers) || Number(numbers) <= 0){
		numbers = 40;
		$("#numb").val(40);
	}
	if(Number(numbers) > 500){
		numbers = 500;
		$("#numb").val(500);
	}
	numbs = [];
	step = 0;
	ti = 1;
	$("#content").html("");
	while(numbs.length < numbers){
		var t = Math.floor(600*Math.random());
		if(numbs.indexOf(t) < 0){
			numbs.push(t);
		}
	}
	$("#step").html("");
	$.each(numbs, function(i,n){
		$("<div>").addClass("div1").css({width: (100/numbers - 0.1)+"%", height: n + "px", "margin-top": (600-n) + "px"})
			.attr("id", n).appendTo($("#content"));
	});
}
 
$(function(){
	init();
	$("#random").click(init);
	$("#bubbleSort").click(function(){
		$(":input").attr("disabled","disabled");
		if(step1 != 0){
			init();
		}
		bubbleSort();
	});
	$("#QuickSort").click(function(){
		$(":input").attr("disabled","disabled");
		if(step1 != 0){
			init();
		}
		QuickSort(numbs, 0, numbs.length);
	});
});
 
function bubbleSort(){
	for(i = 0; i< numbs.length;i++){
		for(j = i + 1;j<numbs.length;j++){
			if(numbs[i] > numbs[j]){
				swap(numbs, i, j);
			}
		}
	}
}
 
function swap(arrays, i, j){
	var t = arrays[i];
	var m = arrays[j];
	arrays[i] = arrays[j];
	arrays[j] = t;
	step1++;
	setTimeout("swapDiv($('#' + "+t+"), $('#' + "+m+"))", (ti++)*50);
}
 
function swapDiv(div1, div2){
	$(".div1").removeClass("sorted");
	var tempDiv = $("<div>");
	div1.after(tempDiv);
	div2.after(div1);
	tempDiv.after(div2);
	tempDiv.remove();
	div1.addClass("sorted");
	div2.addClass("sorted");
	$("#step").html(++step);
	
	if(step == step1){
		$(":input").attr("disabled","");
		$(".div1").removeClass("sorted");
	}
}
 
function QuickSort(pData, left, right){    
	var i,j;   
	var middle,temp;   
	i = left;   
	j = right;   
	middle = pData[left];   
	while(true){   
		while((++i)<right-1 && pData[i]<middle);   
		while((--j)>left && pData[j]>middle);   
		if(i>=j)   
			break;    
		swap(pData, i, j);
	}   
	swap(pData, left, j);  
	if(left<j)    
		QuickSort(pData,left,j);   
	if(right>i)    
		QuickSort(pData,i,right);   
}  
</script> 
</head> 
<body> 
<div id="num"></div> 
<button id="bubbleSort">bubbleSort</button> 
<button id="QuickSort">QuickSort</button> 
<input id="numb" value="40"/> 
<button id="random">init</button> 
step:<span id="step"></span> 
<div id="content"></div> 
</body> 
</html>

分享到：