版权声明：本文为博主原创文章，未经博主允许不得转载。github仓库:https://github.com/lzcwds，欢迎访问 https://blog.csdn.net/lzcwds/article/details/82495525
1.简述
看到这个面试题。感觉挺有意思的。题目大概意思就是把排序的过程用动画的效果体现出来。这既考了排序算法的知识，又考了前端的基础知识。
2.实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#container{
position: relative;
}
.num-box{
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px solid #666666;
border-radius: 2px;
transition: left 2s;
}
</style>
<body>
<div id="container">
</div>
<script>
//实现从小到大排列
let arr = [12,48,28,29,10,98,74,56,27,29,37,85];
let container =document.querySelector('#container');
//将dom在
arr.forEach(function(item,index){
container.innerHTML += `<div class="num-box" id="${index}" style="left: ${index*60+10}px;">${item}</div>`;
});
let time = 1;
for(let i =0 ;i<arr.length;i++){
for(let j = 0;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
//ES6结构赋值，即交换两个值
[arr[j],arr[j+1]] = [arr[j+1],arr[j]];
setTimeout(function(){
let x = document.getElementById(j);
let y = document.getElementById(j+1);
[x.style.left,y.style.left] = [y.style.left,x.style.left];
[x.id,y.id] = [y.id,x.id];
},time * 2000)
time++;
}
}
}
</script>
</body>
</html>