console
var snapshots=[]; //快照集合
var timer=null; //定时
var arr=[50,21,5,89,13,35,69,44,60,15,51,80,55,71]; //排序数组
/*冒泡排序*/
function bubbleSort(arr){
if(arr.length<=1){
return arr;
};
var temp=0;
for(var i=0; i<arr.length; i++){
for(var j=0; j<arr.length-i-1; j++){
if(arr[j]>arr[j+1]){
temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
snapshots.push(JSON.parse(JSON.stringify(arr))); //<=记录下快照
};
};
};
return arr;
};
Array.prototype.bubbleSort=function(){
return bubbleSort(this);
}
function painting(){
var container=document.getElementById("container");
var bars=[].slice.call( document.querySelectorAll(".bar") ); //将所有bar元素的集合转换为数组对象
for(var i=0;i<arr.length;i++){
if(bars.length!=arr.length){
var bar=document.createElement("div");
bar.className="bar";
container.appendChild(bar);
}else{
break; //当bar的数量等于数组的长度时,停止创建bar元素
};
};
var snapshot=snapshots.shift() || []; //取出快照记录数组中的第一条记录
console.log(snapshot);
if(snapshot.length!=0){
for(var i=0; i<bars.length; i++){
bars[i].innerHTML=snapshot[i];
bars[i].style.height=snapshot[i]*5+"px";
bars[i].style.left=(i+1)*50+"px";
};
}else{
clearInterval(timer); //绘制结束
return;
};
};
arr.bubbleSort(); //排序
timer=setInterval(painting,500); //定时绘制
<div id="container"></div>
#container {
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.bar {
width: 20px;
margin-left: 10px;
border: px solid #740A17;
background-color: #CD6B6B;
}