<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.myitem{
border:1px solid black;
position: absolute;
width:20px;
height:20px;
text-align: center;
transition:left 1s;
}
</style>
</head>
<body>
<div id="container">
</div>
<script>
//这里输入要排序的数
//var arr=readline().split(',').map((item)=>{Number(item)});
var arr=[5,8,2,7,1,9,3,5,12];
var len=arr.length;
var con=document.getElementById('container');
var nodeArr=[];
for(var i=0;i<arr.length;i++)
{
var ele=document.createElement('div');
ele.className='myitem';
ele.innerHTML=arr[i]+'';
ele.setAttribute('data-index',i);
ele.style.left=30*i+'px';
con.appendChild(ele);
nodeArr.push(ele);
}
//选择排序
var site=0;
function run(){
console.log(arr);
setTimeout(function () {
var min=Number.MAX_VALUE;
var index=site;
for(var i=site;i<len;i++)
{
if(arr[i]<min)
{
min=arr[i];
index=i;
}
}
var temp=arr[index];
arr[index]=arr[site];
arr[site]=temp;
//交换
nodeArr[site].style.left=index*30+'px';
nodeArr[index].style.left=site*30+'px';
//交换
temp=nodeArr[site];
nodeArr[site]=nodeArr[index];
nodeArr[index]=temp;
site++;
if(site<len)
run();
},1000);
}
run();
</script>
</body>
</html>
