最近在搞一个好玩的东西，算法、前端学习两不误，哈哈，不废话，让大家看看效果
源码链接：https://codepen.io/tiantianhy/pen/GRdbrmZ
虽然有点不好看，css还需要优化一下，但是功能都齐全了，下面来看看代码
index部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排序算法动画演示</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/SortAnimate.js"></script>
<script type="text/javascript" src="js/cocktail.js"></script>
<script type="text/javascript" src="js/bubble.js"></script>
<script type="text/javascript" src="js/comb.js"></script>
<script type="text/javascript" src="js/insert.js"></script>
<script type="text/javascript" src="js/oddEven.js"></script>
<script type="text/javascript" src="js/quick.js"></script>
<script type="text/javascript" src="js/selection.js"></script>
<script type="text/javascript" src="js/shell.js"></script>
</head>
<body>
<div style="margin:50px;">
<h1>排序算法动画演示</h1>
<div>
<p> 动画速度：
<input value="170" max="200" min="1" id="speed" type="range" onchange="srotanimte && srotanimte.changeSpeed(200-this.value)" >
</p>
<p> 数组长度：
<input value="50" width="50" id="arrlen">
<input type="button" value="随即数组" onclick="randomArrayText(document.getElementById('arrlen').value)" class="btn" />
</p>
<p> 待排序数组：
<input id="arrayText" value="[43,27,39,17,32,21,14,42,22,15,18,12,46,1,16,10,4,29,3,23,24,49,0,5,36,13,34,6,19,47,9,33,31,20,28,44,38,37,41,40,8,35,30,7,11,45,2,25,48,26]" style="width:80%;">
</p>
<p></p>
</div>
<div>
<input type="button" value="冒泡排序" onclick="playSortAnimate(sortMethodMap.bubble)" class="btn" />
<input type="button" value="快速排序" onclick="playSortAnimate(sortMethodMap.quick)" class="btn" />
<input type="button" value="插入排序" onclick="playSortAnimate(sortMethodMap.insert)" class="btn" />
<input type="button" value="希尔排序" onclick="playSortAnimate(sortMethodMap.shell)" class="btn" />
<input type="button" value="选择排序" onclick="playSortAnimate(sortMethodMap.selection)" class="btn" />
<input type="button" value="鸡尾酒排序" onclick="playSortAnimate(sortMethodMap.cocktail)" class="btn" />
<input type="button" value="奇偶排序" onclick="playSortAnimate(sortMethodMap.oddEven)" class="btn" />
<input type="button" value="梳排序" onclick="playSortAnimate(sortMethodMap.comb)" class="btn" />
</div>
<div>
<div class="sort-animate-box" id="sortAnimateBox" style="height:100px;"></div>
<div id="sortText"></div>
</div>
</div>
<script type="text/javascript">
var srotanimte = null;
var sortMethodMap = {
bubble:{
sort:"bubbleSort",
animateSort:"bubbleSortAnimate",
text:"冒泡排序"
},
quick:{
sort:"quickSort",
animateSort:"quickSortAnimate",
text:"快速排序"
},
insert:{
sort:"insertSort",
animateSort:"insertSortAnimate",
text:"插入排序"
},
shell:{
sort:"shellSort",
animateSort:"shellSortAnimate",
text:"希尔排序"
},
selection:{
sort:"selectionSort",
animateSort:"selectionSortAnimate",
text:"选择排序"
},
cocktail:{
sort:"cocktailSort",
animateSort:"cocktailSortAnimate",
text:"鸡尾酒排序"
},
oddEven:{
sort:"oddEvenSort",
animateSort:"oddEvenSortAnimate",
text:"奇偶酒排序"
},
comb:{
sort:"combSort",
animateSort:"cocktailSortAnimate",
text:"梳排序"
}
};
function $(id){
return document.getElementById(id);//.value;
}
function getSpeed(){
return 200-document.getElementById('speed').value;
}
function randomArrayText( len ){
len = len || 50;
var arr = [];
for(var i=0; i<len;i++){
arr.push( i );
}
arr.sort(function(){
return Math.random() - 0.5;
});
document.getElementById( "arrayText" ).value = "["+ arr.toString() +"]";
};
function getArray(){
var text = document.getElementById( "arrayText" ).value;
try{
return JSON.parse( text );
}catch(e){
alert("数组有错误")
}
}
function playSortAnimate( key ){
var arr = getArray();
srotanimte = new SortAnimate( arr, $('sortAnimateBox') );
$('sortText').innerHTML = key.text;
window[key.animateSort](arr, srotanimte);
srotanimte.play(getSpeed());
}
//正确性测试
function test(){
var arrays = [
[2,0,1,4,3,5,7,8,6,9],
[2,4,6,0,1,3,8,5,7,9],
[0,6,2,4,3,1,8,5,7,9],
[5,2,0,1,6,7,8,3,4,9],
[0,6,1,2,3,7,8,5,4,9],
[0,2,3,8,5,1,7,6,4,9],
[0,4,1,2,3,6,7,8,9,5],
[0,1],
[1,0],
[0],
[1],
[]
];
console.log("排序正确性测试");
for(var i=0; i<arrays.length; i++){
srotanimte = new SortAnimate( arrays[i], $('sortAnimateBox') );
for(var key in sortMethodMap){
console.log(sortMethodMap[key].text, window[sortMethodMap[key].sort](arrays[i]));
console.log(sortMethodMap[key].text, window[sortMethodMap[key].animateSort](arrays[i], srotanimte));
}
}
console.log("结束");
}
//console.log("选择:",cocktailSort([9,1,3,2,4,6,8,5,0,7], srotanimte));
test();
</script>
</div>
</body>
</html>
css部分：
.column{
width:7px;
height:100%;
background:#cccccc;
display:inline-block;
margin:0 1px;
}
.column:hover{
background:#f30;
}
.active{
background:#888888;
}
.focus{
background:#ffcccc;
}
.highlight{
background:#ff6666;
}
bubble.js部分：
/**
冒泡排序
*/
function bubbleSort(array, srotanimte){
var len = array.length,i,j, d;
for(i=len;i--;){
for(j=0; j<i; j++){
var z = j+1;
if(array[j] > array[z]){
d = array[j];
array[j] = array[z];
array[z] = d;
}
}
}
return array;
};
function bubbleSortAnimate(array, srotanimte){
var len = array.length,i,j, d;
srotanimte.activeFragment(0,len);
for(i=len;i--;){
for(j=0; j<i; j++){
var z = j+1;
srotanimte.activeOne(j);
if(array[j] > array[z]){
d = array[j];
array[j] = array[z];
array[z] = d;
srotanimte.exchange(j, z);
}
srotanimte.blurOne(j);
}
srotanimte.blurFragment(j,len);
}
return array;
};
cocktail.js部分：
/**
鸡尾酒
*/
function cocktailSort(array){
var len = array.length;
var item = array[0];
var i = 0;
var j = len;
var k=0;
var index = 0;
var ischange = false;
while(j - i > 1){
//寻找最大
ischange = false;
item = array[i];
index = i;
for(k=i; k<j; k++){
if(item > array[k]){
array[index] = array[k];
array[k] = item;
ischange = true;
}else{
item = array[k];
}
index = k;
}
j--;
//寻找最小
item = array[j];
index = j;
for(k=j; k>i-1; k--){
if(item < array[k]){
array[index] = array[k];
array[k] = item;
ischange = true;
}else{
item = array[k];
}
index = k;
}
i++;
//没有任何交换跳出
if( ischange == false ){
break;
}
}
return array;
}
function cocktailSortAnimate(array, srotanimte){
var len = array.length;
var item = array[0];
var i = 0;
var j = len;
var k=0;
var index = 0;
var ischange = false;
while(j - i > 1){
//寻找最大
ischange = false;
item = array[i];
index = i;
srotanimte.activeFragment(i, j);
for(k=i; k<j; k++){
srotanimte.activeOne(k);
if(item > array[k]){
array[index] = array[k];
array[k] = item;
ischange = true;
srotanimte.exchange(index, k);
}else{
item = array[k];
}
index = k;
srotanimte.blurOne(k);
}
srotanimte.blurFragment(i, j);
j--;
//寻找最小
item = array[j];
index = j;
srotanimte.activeFragment(i-1, j);
for(k=j; k>i-1; k--){
srotanimte.activeOne(k);
if(item < array[k]){
array[index] = array[k];
array[k] = item;
ischange = true;
srotanimte.exchange(index, k);
}else{
item = array[k];
}
index = k;
srotanimte.blurOne(k);
}
srotanimte.blurFragment(i-1, j);
i++;
//没有任何交换跳出
if( ischange == false ){
break;
}
}
return array;
}
comb.js部分：
/**
鸡尾酒
*/
function cocktailSort(array){
var len = array.length;
var item = array[0];
var i = 0;
var j = len;
var k=0;
var index = 0;
var ischange = false;
while(j - i > 1){
//寻找最大
ischange = false;
item = array[i];
index = i;
for(k=i; k<j; k++){
if(item > array[k]){
array[index] = array[k];
array[k] = item;
ischange = true;
}else{
item = array[k];
}
index = k;
}
j--;
//寻找最小
item = array[j];
index = j;
for(k=j; k>i-1; k--){
if(item < array[k]){
array[index] = array[k];
array[k] = item;
ischange = true;
}else{
item = array[k];
}
index = k;
}
i++;
//没有任何交换跳出
if( ischange == false ){
break;
}
}
return array;
}
function cocktailSortAnimate(array, srotanimte){
var len = array.length;
var item = array[0];
var i = 0;
var j = len;
var k=0;
var index = 0;
var ischange = false;
while(j - i > 1){
//寻找最大
ischange = false;
item = array[i];
index = i;
srotanimte.activeFragment(i, j);
for(k=i; k<j; k++){
srotanimte.activeOne(k);
if(item > array[k]){
array[index] = array[k];
array[k] = item;
ischange = true;
srotanimte.exchange(index, k);
}else{
item = array[k];
}
index = k;
srotanimte.blurOne(k);
}
srotanimte.blurFragment(i, j);
j--;
//寻找最小
item = array[j];
index = j;
srotanimte.activeFragment(i-1, j);
for(k=j; k>i-1; k--){
srotanimte.activeOne(k);
if(item < array[k]){
array[index] = array[k];
array[k] = item;
ischange = true;
srotanimte.exchange(index, k);
}else{
item = array[k];
}
index = k;
srotanimte.blurOne(k);
}
srotanimte.blurFragment(i-1, j);
i++;
//没有任何交换跳出
if( ischange == false ){
break;
}
}
return array;
}
insert.js部分
/**
插入排序
*/
function insertSort(array){
var i = 1, j, step, key,
len = array.length;
for(; i < len; i++){
step = j = i;
key = array[j];
while(--j > -1){
if(array[j] > key){
array[j+1] = array[j];
}else{
break;
}
}
array[j+1] = key;
}
return array;
}
function insertSortAnimate(array, srotanimte){
var i = 1, j, step, key,
len = array.length;
for(; i < len; i++){
//srotanimte.activeOne(i);
step = j = i;
key = array[j];
srotanimte.activeFragment(0, i);
while(--j > -1){
srotanimte.activeOne(j);
if(array[j] > key){
srotanimte.exchange(j+1, j);
array[j+1] = array[j];
srotanimte.blurOne(j);
}else{
srotanimte.blurOne(j);
break;
}
srotanimte.blurOne(j);
}
//srotanimte.blurOne(i);
array[j+1] = key;
srotanimte.blurFragment(0, i);
}
return array;
}
oddEven.js部分：
/**
奇偶排序
*/
function oddEvenSort(list){
var len = list.length;
var sorted = true;
while(sorted){
sorted = false;
for(var i = 1; i < len - 1; i += 2)
{
if(list[i] > list[i + 1])
{
var t = list[i];
list[i] = list[i + 1];
list[i + 1] = t;
sorted = true;
}
}
for(var i = 0; i < len; i += 2){
if(list[i] > list[i + 1]){
var tmp = list[i];
list[i] = list[i + 1];
list[i + 1] = tmp;
sorted = true;
}
}
}
return list;
}
function oddEvenSortAnimate(list, srotanimte){
var len = list.length;
var sorted = true;
while(sorted){
sorted = false;
for(var i = 1; i < len - 1; i += 2)
{
srotanimte.activeOne(i);
srotanimte.activeOne(i+1);
if(list[i] > list[i + 1])
{
var t = list[i];
list[i] = list[i + 1];
list[i + 1] = t;
sorted = true;
srotanimte.exchange(i, i+1);
}
srotanimte.blurOne(i);
srotanimte.blurOne(i+1);
}
for(var i = 0; i < len; i += 2){
srotanimte.activeOne(i);
srotanimte.activeOne(i+1);
if(list[i] > list[i + 1]){
var tmp = list[i];
list[i] = list[i + 1];
list[i + 1] = tmp;
sorted = true;
srotanimte.exchange(i, i+1);
}
srotanimte.blurOne(i);
srotanimte.blurOne(i+1);
}
}
return list;
}
quick.js部分：
/**
快速排序
*/
function quickSort(array){
if(array.length == 0){
return array;
}
var i = 0;
var j = array.length - 1;
var Sort = function(i, j){
// 结束条件
if(i == j ){
return;
};
var key = array[i];
var stepi = i; // 记录开始位置
var stepj = j; // 记录结束位置
while(j > i){
// j <<-------------- 向前查找
if(array[j] >= key){
j--;
}else{
array[i] = array[j]
//i++ ------------>>向后查找
while(j > ++i){
if(array[i] > key){
array[j] = array[i];
break;
}
}
}
}
// 如果第一个取出的 key 是最小的数
if(stepi == i){
Sort(++i, stepj);
return ;
}
// 最后一个空位留给 key
array[i] = key;
// 递归
Sort(stepi, i);
Sort(j, stepj);
}
Sort(i, j);
return array;
}
function quickSortAnimate(array, srotanimte){
if(array.length == 0){
return array;
}
var i = 0;
var j = array.length - 1;
var Sort = function(i, j){
// 结束条件
if(i == j ){
return;
};
srotanimte.activeFragment(i, j)
var key = array[i];
var stepi = i; // 记录开始位置
var stepj = j; // 记录结束位置
//srotanimte.activeOne(i);
while(j > i){
srotanimte.activeOne(j);
// j <<-------------- 向前查找
if(array[j] >= key){
srotanimte.blurOne(j);
j--;
}else{
srotanimte.exchange(i, j);
array[i] = array[j]
//i++ ------------>>向后查找
while(j > ++i){
srotanimte.activeOne(i);
if(array[i] > key){
srotanimte.exchange(i, j);
srotanimte.blurOne(i);
array[j] = array[i];
break;
}
srotanimte.blurOne(i);
}
}
srotanimte.blurOne(j);
}
// 如果第一个取出的 key 是最小的数
srotanimte.blurFragment()
if(stepi == i){
Sort(++i, stepj);
return ;
}
// 最后一个空位留给 key
array[i] = key;
// 递归
Sort(stepi, i);
Sort(j, stepj);
}
Sort(i, j);
return array;
}
selection.js部分：
/**
选择排序
*/
function selectionSort(array){
var len = array.length;
var index = 0;
var k;
var item;
var c;
for(var i=0; i<len; i++){
item = array[i];
index = i;
//寻找最小的数位置
for(j=i+1; j<len;j++){
if(array[j] < item){
index = j;
item = array[j];
}
}
if(index != i){
c = array[i];
array[i] = array[index];
array[index] = c;
}
}
return array;
}
function selectionSortAnimate(array, srotanimte){
var len = array.length;
var index = 0;
var k;
var item;
var c;
for(var i=0; i<len; i++){
item = array[i];
index = i;
srotanimte.activeOne(i);
//寻找最小的数位置
for(j=i+1; j<len;j++){
srotanimte.activeOne(j);
if(array[j] < item){
srotanimte.blurOne(index);
srotanimte.activeOne(j);
index = j;
item = array[j];
}
srotanimte.blurOne(j);
}
srotanimte.blurOne(i);
if(index != i){
srotanimte.blurOne(index);
srotanimte.exchange(i, index);
c = array[i];
array[i] = array[index];
array[index] = c;
}
}
return array;
}
shell.js部分：
/*
希尔
*/
function shellSort(array){
var stepArr = [1031612713, 217378076, 45806244, 9651787, 2034035, 428481, 90358, 19001, 4025, 1750, 836, 701, 301, 132, 57, 23, 10, 4, 1]; // reverse() 在维基上看到这个最优的步长 较小数组
var i = 0;
var stepArrLength = stepArr.length;
var len = array.length;
var len2 = parseInt(len/2);
for(;i < stepArrLength; i++){
if(stepArr[i] > len2){
continue;
}
stepSort(stepArr[i]);
}
// 排序一个步长
function stepSort(step){
//console.log(step) 使用的步长统计
var i = 0, j = 0, f, tem, key;
for(;i < step; i++){// 依次循环列
for(j=1; step * j + i < len; j++){//依次循环每列的每行
tem = f = step * j + i;
key = array[f];
while((tem-=step) >= 0){// 依次向上查找
if(array[tem] > key){
array[tem+step] = array[tem];
}else{
break;
}
}
array[tem + step ] = key;
}
}
}
return array;
}
function shellSortAnimate(array, srotanimte){
var stepArr = [1031612713, 217378076, 45806244, 9651787, 2034035, 428481, 90358, 19001, 4025, 1750, 836, 701, 301, 132, 57, 23, 10, 4, 1]; // reverse() 在维基上看到这个最优的步长 较小数组
var i = 0;
var stepArrLength = stepArr.length;
var len = array.length;
var len2 = parseInt(len/2);
for(;i < stepArrLength; i++){
if(stepArr[i] > len2){
continue;
}
stepSort(stepArr[i]);
}
// 排序一个步长
function stepSort(step){
//console.log(step) 使用的步长统计
var i = 0, j = 0, f, tem, key;
for(;i < step; i++){// 依次循环列
for(j=1; step * j + i < len; j++){//依次循环每列的每行
tem = f = step * j + i;
key = array[f];
srotanimte.activeOne( f );
while((tem-=step) >= 0){// 依次向上查找
//console.log(tem);
srotanimte.activeOne( tem );
if(array[tem] > key){
srotanimte.exchange(tem+step, tem);
array[tem+step] = array[tem];
}else{
srotanimte.blurOne( tem );
break;
}
srotanimte.blurOne( tem );
}
srotanimte.blurOne( f );
array[tem + step ] = key;
}
}
}
return array;
}
SortAnimate.js部分：
/**
记录数组排序过程的步骤
options
*/
function SortAnimate( array, wrapper ){
this.array = array.slice();
this.max = Math.max.apply(Math, array);
this.ui = {columns:[], wrapper:wrapper || document.body};
this.index = -1;
this.animte = [];
this.html = "";
this.init();
};
SortAnimate.prototype = {
init:function(){
var html = "";
for(var i=0; i<this.array.length; i++){
html += this.getColumn(this.array[i], this.array[i]);
}
this.html = html;
this.ui.wrapper.innerHTML = this.html;
this.ui.columns = this.ui.wrapper.getElementsByClassName("column");
},
getHeight:function( number ){
return parseInt(number/this.max*100);
},
getColumn:function( number){
return '<div class="column" style="height:'+this.getHeight(number)+'%" title="'+ number +'" ></div>';
},
//交换两个数的位置
uiExchange:function( index1, index2 ){
var tmp = this.array[index1];
this.array[index1] = this.array[index2];
this.array[index2] = tmp;
this.uiSetHeight(index1);
this.uiSetHeight(index2);
},
uiSetHeight:function( index ){
var number = this.array[index];
this.ui.columns[index].style.height = this.getHeight( number )+"%";
this.ui.columns[index].title = number;
},
uiHighlightOne:function(index1, index2){
this.ui.columns[index1].className += " highlight";
this.ui.columns[index2].className += " highlight";
},
uiUnHighlightOne:function(index1, index2){
this.ui.columns[index1].className = this.ui.columns[index1].className.replace(" highlight", "");
this.ui.columns[index2].className = this.ui.columns[index2].className.replace(" highlight", "");
},
//激活第 index 个元素
uiActiveOne:function( index ){
this.ui.columns[index].className += " focus";
},
//取消激活 index 个元素
uiBlurOne:function( index ){
this.ui.columns[index].className = this.ui.columns[index].className.replace(" focus", "");
},
//激活数组中一个片段
uiActiveFragment:function(startIndex, endIndex){
//console.log("uiActiveFragment", startIndex, endIndex);
this.startIndex = startIndex;
this.endIndex = endIndex;
for(var i= startIndex; i<endIndex; i++){
this.ui.columns[i].className += " active";
}
},
//取消激活数组中一个片段
uiBlurFragment:function(startIndex, endIndex){
startIndex = startIndex || this.startIndex;
endIndex = endIndex || this.endIndex;
for(var i= startIndex; i<endIndex; i++){
this.ui.columns[i].className = this.ui.columns[i].className.replace(" active","");
}
},
activeOne:function( index ){
this.animte.push({
type:"uiActiveOne",
data:[index]
});
},
blurOne:function( index ){
this.animte.push({
type:"uiBlurOne",
data:[index]
});
},
exchange:function(index1, index2){
this.highlight(index1, index2);
this.unHighlight(index1, index2);
this.animte.push({
type:"uiExchange",
data:[index1, index2]
});
},
activeFragment:function(startIndex, endIndex){
startIndex = startIndex < 0 ? 0 : startIndex;
this.animte.push({
type:"uiActiveFragment",
data:[startIndex, endIndex]
});
},
blurFragment:function(startIndex, endIndex){
startIndex = startIndex < 0 ? 0 : startIndex;
this.animte.push({
type:"uiBlurFragment",
data:[startIndex, endIndex]
});
},
highlight:function( index1, index2 ){
this.animte.push({
type:"uiHighlightOne",
data:[index1, index2]
});
},
unHighlight:function(index1, index2){
this.animte.push({
type:"uiUnHighlightOne",
data:[index1, index2]
});
},
changeSpeed:function( speed ){
this.speed = speed;
this.play();
},
/**
play 播放排序动画
id 容器id
speed 速度单位毫秒
*/
play:function( speed ){
clearInterval( SortAnimate.interid );
this.speed = speed || this.speed;
var animate = this.animte;
var len = animate.length;
var self = this;
SortAnimate.interid = setInterval(function(){
self.index++
if(self.index<len){
self[animate[self.index].type].apply( self, animate[self.index].data);
}else{
clearInterval( SortAnimate.interid );
}
}, this.speed);
}
};
建立如上图的文件，就OK啦，谢谢观看！
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
