http://www.html5tricks.com/demo/jiaoben2255/index.html 排序算法jquery演示源代碼
阿新 • • 發佈：2017-06-02
*** nor lec 過程 http child move num out
| <!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 |
|
| <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> |
http://www.html5tricks.com/demo/jiaoben2255/index.html 排序算法jquery演示源代碼