21、任务十九——可视化数据排序
0、题目
- 基于任务18
- 限制输入的数字在10-100
- 队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
- 队列展现方式变化如图，直接用高度表示数字大小
- 实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来
1、解答过程
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>task19</title> 6 <style> 7 #button{ 8 display:inline-block; 9 } 10 ul{ 11 list-style: none; 12 height:550px; 13 width:90%; 14 display:flex; 15 justify-content: center; 16 align-content: flex-end; 17 align-items: flex-end; 18 } 19 li{ 20 background-color: rgba(111, 96, 251, 1); 21 color:white; 22 width:15px; 23 display:inline-block; 24 margin-left:3px; 25 } 26 </style> 27 </head> 28 <body> 29 <input id="input" type="text"> 30 <div id="button"> 31 <button id="leftin">左侧入</button> 32 <button id="rightin">右侧入</button> 33 <button id="leftout">左侧出</button> 34 <button id="rightout">右侧出</button> 35 <button id="random">随机生成一组数据</button> 36 <button id="sortdata">排序</button> 37 </div> 38 <ul id="result"> 39 </ul> 40 <script> 41 var number=[]; 42 var $=function(id){ 43 return document.getElementById(id); 44 } 45 //给按钮的父元素添加事件委托，避免给每个按钮添加点击事件 46 $("button").addEventListener("click",function(e){ 47 var target=e.target; 48 var input=$("input").value; 49 switch(target.id){ 50 case "leftin":{ 51 if(input>100||input<10||isNaN(input)) alert("请输入10-100之间的数"); 52 if(number.length<60) { //控制最多只能输入60个数据 53 number.unshift(input); 54 show(); 55 } 56 else alert("最多只能输入60个数据！"); 57 break; 58 } 59 case "rightin":{ 60 if(input>100||input<10||isNaN(input)) alert("请输入10-100之间的数"); 61 if(number.length<60){ 62 number.push(input); 63 show(); 64 } 65 else alert("最多只能输入60个数据！"); 66 break; 67 } 68 case "leftout":{ 69 alert(number.shift(number[number.length-1])); 70 show(); 71 break; 72 } 73 case "rightout":{ 74 alert(number.pop(number[0])); 75 show(); 76 break; 77 } 78 } 79 }) 80 //给输出的结果添加事件委托，使点击的元素被删除 81 $("result").addEventListener("click",function(e){ 82 if(e.target.nodeName!="LI") return; //看点击的是不是li标签 83 var tar=parseInt(e.target.getAttribute("id")) //得到被点击元素的id属性，之前id绑定的是该元素在数组中的序号 84 number.splice(tar,1); //删除数组number中的元素，1代表只删除一个元素 85 show(); 86 return number; 87 }) 88 //生成一组随机数 89 $("random").onclick=function(){ 90 number=[]; 91 for(var i=0;i<60;i++){ 92 number[i]=parseInt(Math.random()*90+10); 93 } 94 show(); 95 return number; 96 } 97 //将数据用柱状图的形式呈现在页面上 98 function show(){ 99 var content=" "; 100 for(var i=0;i<number.length;i++){ 101 content+="<li id='"+i+"'style='height:"+number[i]*5+"px;'>"+number[i]+"</li>"; 102 } 103 $("result").innerHTML=content; 104 } 105 //数据排序的过程 106 $("sortdata").onclick=function(){ 107 var max=0,i=0,j=1; 108 time=null; 109 time=setInterval(run,5); 110 function run(){ 111 if(i<number.length){ 112 if(j<number.length){ 113 if(number[i]>number[j]){ 114 max=number[i]; 115 number[i]=number[j]; 116 number[j]=max; 117 show(); //绘制这一次数据交换后的柱状图 118 } 119 j++; 120 } 121 else{ 122 i++; 123 j=i+1; 124 } 125 } 126 else{ 127 clearInterval(time); 128 return; 129 } 130 } 131 } 132 </script> 133 </body> 134 </html>
2、遇到的问题
这一问相比较17、18问，主要添加的任务就是要把数据的排序过程一步一步的展现出来
这里采用的排序方法是先将第一个数和第二个数比较，如果第一个数大于第二个数就交换两个数的位置（将小的数排在前面），再依次比较第一个数和第三个数。。。。以此类推，那么这一轮下来就可以将最小的数排在第一位，第二轮就拿第二个数和后面的依次比较，得到第二小的数排在第二位，经过number.length轮就可以把所有的数按从小排好了。
至于如何用可视化的方式将过程展现出来，这里要用到setInterval()方法，该方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，所以我们只要以一定的周期调用排序的每一步，也就是将每一次数据交换之后得到的柱状图以一定的时间间隔展现出来，那么排序的过程看起来就是一步一步进行的，而不是一瞬间就结束了。
注意：setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
