全部评论
<!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>
相关推荐
06-25 17:28
杭州电子科技大学 测试工程师 点赞 评论 收藏
分享
05-04 11:10
哈尔滨工业大学 嵌入式工程师 点赞 评论 收藏
分享
点赞 评论 收藏
分享