| |
<!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>jquery高速排序算法动画特效 </title> |
| |
<script language="javascript" src="js/jquery.min.js"></script> |
| |
</head> |
| |
<style> |
| |
*{ margin:0; padding:0;} |
| |
body{ background-color:#666;} |
| |
#box{ width:1000px; height:480px; background-color:#000; margin:0 auto; position:relative; overflow:hidden;} |
| |
#select{ width:1000px; height:50px; line-height:50px; text-align:center; margin:20px auto; font-size:12px; color:#fff;} |
| |
.test{ border:1px solid #CCC; background-color:#fff; position:absolute;bottom:0;} |
| |
.pass{ background-color:#F00;} |
| |
.change{ background-color:#0F3;} |
| |
.changeEnd{ background-color:#FF0;} |
| |
</style> |
| |
<body> |
| |
<div id="box"></div> |
| |
<div id="select"> |
| |
算法:<select id="algorithm"> |
| |
<option value="1" selected="selected">冒泡算法</option> |
| |
<option value="2">鸡尾酒算法</option> |
| |
<option value="3">插入算法</option> |
| |
</select> |
| |
子元素个数:<select id="num"> |
| |
<option value="200" selected="selected" >200</option> |
| |
<option value="150" >150</option> |
| |
<option value="100" >100</option> |
| |
<option value="50" >50</option> |
| |
<option value="10" >10</option> |
| |
</select> |
| |
算法运行速度:<select id="speed"> |
| |
<option value="1" selected="selected" >fast</option> |
| |
<option value="5" >normal</option> |
| |
<option value="10" >slow</option> |
| |
<option value="100" >snail</option> |
| |
</select> |
| |
附加动画:<input type="checkbox" id="isAnimat" /> |
| |
<input type="button" value="開始" /> |
| |
</div> |
| |
<script language="javascript"> |
| |
/* |
| |
* 排序算法 js动画演示运算过程. Author:Cui; |
| |
*/ |
| |
var $isAnimat,$speed; |
| |
$("#select>:button").click(function() { |
| |
//父容器 |
| |
var $box = $("#box"); |
| |
$box.empty(); |
| |
//算法; |
| |
var selects = $("#algorithm").val(); |
| |
//附加动画; |
| |
$isAnimat = $('#isAnimat').is(':checked'); |
| |
//运行速度 |
| |
$speed = $('#speed').val(); |
| |
//子元素个数; |
| |
var $max = $("#num").val(); |
| |
//子元素宽度; |
| |
var $width = (1e3 - $max * 2) / $max; |
| |
//获取一个随机数数组 length=200(父容器的宽度/元素的宽+边框) 500最大高度,10最小高度; |
| |
var H = getRandom(10, 500, $max); |
| |
//加入演示用容器 |
| |
var i = 0; |
| |
var time = window.setInterval(function() { |
| |
if (i >= H.length) { |
| |
window.clearInterval(time); |
| |
selectAnimate(H, selects); |
| |
$("#select").slideUp(); |
| |
} |
| |
var $child = $('<div class="test"></div>'); |
| |
var height = H[i] + "px"; |
| |
var left = i * ($width + 2) + "px"; |
| |
$child.css({ |
| |
height:height, |
| |
left:left, |
| |
width:$width |
| |
}).appendTo($box); |
| |
i++; |
| |
}, 10); |
| |
}); |
| |
|
| |
//选择要运行的动画; |
| |
function selectAnimate(arr, selects) { |
| |
if (selects == 1) { |
| |
bubbleSort(arr); |
| |
} |
| |
if (selects == 2) { |
| |
cocktailSort(arr); |
| |
} |
| |
if (selects == 3) { |
| |
insertSort(arr); |
| |
} |
| |
} |
| |
|
| |
//生成count个 范围在maxs-mins之间不反复的随机数 |
| |
function getRandom(mins, maxs, count) { |
| |
if (maxs - mins < count - 1) { |
| |
return false; |
| |
} |
| |
var _this = { |
| |
limit:{ |
| |
maxs:maxs, |
| |
mins:mins, |
| |
count:count |
| |
}, |
| |
rondomArr:[] |
| |
}; |
| |
_this.randomFunc = function() { |
| |
return parseInt(Math.random() * (_this.limit.maxs - _this.limit.mins + 1) + _this.limit.mins); |
| |
}; |
| |
_this.in_array = function(val) { |
| |
for (var i = 0; i < _this.rondomArr.length && _this.rondomArr[i] != val; i++) ; |
| |
return !(i == _this.rondomArr.length); |
| |
}; |
| |
_this.getRandomArr = function() { |
| |
for (var i = 0; i < _this.limit.count; i++) { |
| |
var val = _this.randomFunc(); |
| |
if (_this.in_array(val)) { |
| |
i--; |
| |
} else { |
| |
_this.rondomArr.push(val); |
| |
} |
| |
} |
| |
return _this.rondomArr; |
| |
}; |
| |
return _this.getRandomArr(); |
| |
} |
| |
|
| |
//冒泡算法动画; |
| |
function bubbleSort(arr) { |
| |
var i = arr.length, j; |
| |
var tempExchangVal; |
| |
var timeDo = function() { |
| |
var time1 = window.setTimeout(function() { |
| |
if (i > 0) { |
| |
j = 0; |
| |
var time2 = window.setInterval(function() { |
| |
if (j < i - 1) { |
| |
changeBox(j, "pass"); |
| |
if (arr[j] > arr[j + 1]) { |
| |
tempExchangVal = arr[j]; |
| |
arr[j] = arr[j + 1]; |
| |
arr[j + 1] = tempExchangVal; |
| |
//演示用容器; |
| |
changeBox(j, "changeEnd", arr[j]); |
| |
changeBox(j + 1, "change", tempExchangVal); |
| |
} |
| |
j++; |
| |
} else { |
| |
window.clearInterval(time2); |
| |
removeBoxColor(); |
| |
i--; |
| |
timeDo(); |
| |
} |
| |
}, $speed); |
| |
} else { |
| |
//结束; |
| |
doEnd(arr); |
| |
} |
| |
}, $speed); |
| |
}; |
| |
timeDo(); |
| |
} |
| |
|
| |
//鸡尾酒算法动画; |
| |
function cocktailSort(arr) { |
| |
var i = 0, j; |
| |
var timedo = function() { |
| |
var time = window.setTimeout(function() { |
| |
if (i < arr.length / 2) { |
| |
j = i; |
| |
var time2 = window.setInterval(function() { |
| |
if (j >= arr.length - i - 1) { |
| |
window.clearInterval(time2); |
| |
var k = arr.length - i; |
| |
var time3 = window.setInterval(function() { |
| |
if (k <= i) { |
| |
removeBoxColor(); |
| |
window.clearInterval(time3); |
| |
timedo(); |
| |
} |
| |
changeBox(k, "pass"); |
| |
if (arr[k] > arr[k + 1]) { |
| |
var temp = arr[k]; |
| |
arr[k] = arr[k + 1]; |
| |
arr[k + 1] = temp; |
| |
changeBox(k, "changeEnd", arr[k]); |
| |
changeBox(k + 1, "change", temp); |
| |
} |
| |
k--; |
| |
}, $speed); |
| |
} |
| |
changeBox(j, "pass"); |
| |
if (arr[j] < arr[j - 1]) { |
| |
var temp = arr[j]; |
| |
arr[j] = arr[j - 1]; |
| |
arr[j - 1] = temp; |
| |
changeBox(j - 1, "changeEnd", temp); |
| |
changeBox(j, "change", arr[j]); |
| |
} |
| |
j++; |
| |
}, $speed); |
| |
} else { |
| |
doEnd(arr); |
| |
} |
| |
i++; |
| |
}, $speed); |
| |
}; |
| |
timedo(); |
| |
} |
| |
|
| |
//插入算法 |
| |
function insertSort(arr) {//插入算法; |
| |
var i = 1; |
| |
var timedo = function() { |
| |
var time = window.setTimeout(function() { |
| |
if (i < arr.length) { |
| |
var tmp = arr[i]; |
| |
var key = i - 1; |
| |
removeBoxColor(); |
| |
var time2 = window.setInterval(function(){ |
| |
changeBox(i, "pass"); |
| |
if(key >= 0 && tmp < arr[key]){ |
| |
arr[key + 1] = arr[key]; |
| |
changeBox(key + 1, "change", arr[key]); |
| |
key--; |
| |
}else{ |
| |
if (key + 1 != i) { |
| |
arr[key + 1] = tmp; |
| |
changeBox(key + 1, "changeEnd", tmp); |
| |
} |
| |
window.clearInterval(time2); |
| |
timedo(); |
| |
} |
| |
},$speed); |
| |
}else{ |
| |
doEnd(arr); |
| |
} |
| |
i++; |
| |
}, $speed); |
| |
} |
| |
timedo(); |
| |
|
| |
} |
| |
|
| |
|
| |
//改变容器颜色及其高度; |
| |
function changeBox(index, className, height) { |
| |
if (arguments[2]) { |
| |
if($isAnimat){ |
| |
var $thisSpeed = 10*$speed; |
| |
$(".test").eq(index).animate({height:height},$thisSpeed).addClass(className); |
| |
}else{ |
| |
$(".test").eq(index).height(height).addClass(className); |
| |
} |
| |
} else { |
| |
$(".test").eq(index).removeClass("change changeEnd").addClass(className); |
| |
} |
| |
} |
| |
|
| |
//清除容器颜色 |
| |
function removeBoxColor() { |
| |
$(".test").removeClass("pass change changeEnd"); |
| |
} |
| |
|
| |
//结束动画 |
| |
function doEnd(arr) { |
| |
removeBoxColor(); |
| |
var i = 0; |
| |
var time = window.setInterval(function() { |
| |
if (i >= arr.length) { |
| |
window.clearInterval(time); |
| |
$("#select").slideDown(); |
| |
} |
| |
$(".test").eq(i).addClass("change").next().addClass("pass"); |
| |
i++; |
| |
}, 5); |
| |
} |
| |
|
| |
/**************算法原型*****************/ |
| |
function prototype_bubbleSort(arr) { |
| |
//冒泡; |
| |
var i = arr.length, j; |
| |
var tempExchangVal; |
| |
while (i > 0) { |
| |
for (j = 0; j < i - 1; j++) { |
| |
if (arr[j] > arr[j + 1]) { |
| |
tempExchangVal = arr[j]; |
| |
arr[j] = arr[j + 1]; |
| |
arr[j + 1] = tempExchangVal; |
| |
} |
| |
} |
| |
i--; |
| |
} |
| |
return arr; |
| |
} |
| |
|
| |
function prototype_cocktailSort(arr) { |
| |
//鸡尾酒 |
| |
for (var i = 0; i < arr.length / 2; i++) { |
| |
//将最小值排到队头 |
| |
for (var j = i; j < arr.length - i - 1; j++) { |
| |
if (arr[j] < arr[j - 1]) { |
| |
var temp = arr[j]; |
| |
arr[j] = arr[j - 1]; |
| |
arr[j - 1] = temp; |
| |
} |
| |
} |
| |
//将最大值排到队尾 |
| |
for (var j = arr.length - i; j > i; j--) { |
| |
if (arr[j] > arr[j + 1]) { |
| |
var temp = arr[j]; |
| |
arr[j] = arr[j + 1]; |
| |
arr[j + 1] = temp; |
| |
} |
| |
} |
| |
} |
| |
return arr; |
| |
} |
| |
|
| |
function prototype_insertSort(arr) {//插入算法; |
| |
for (var i = 1; i < arr.length; i++) { |
| |
var tmp = arr[i]; |
| |
var key = i - 1; |
| |
while (key >= 0 && tmp < arr[key]) { |
| |
arr[key + 1] = arr[key]; |
| |
key--; |
| |
} |
| |
if (key + 1 != i) arr[key + 1] = tmp; |
| |
} |
| |
return arr; |
| |
} |
| |
/**************算法原型*End***************/ |
| |
|
| |
</script> |
| |
<div style="text-align:center;clear:both;"> |
| |
<script src="/gg_bd_ad_720x90.js"
type="text/javascript"></script> |
| |
<script src="/follow.js"
type="text/javascript"></script> |
| |
</div> |
| |
|
| |
</body> |
| |
</html> |
浙公网安备 33010602011771号