任务描述

l  基于上一任务

l  限制输入的数字在10-100

l  队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示

l  队列展现方式变化如图，直接用高度表示数字大小

l  实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来

 

 

设置max和min就可以设置input的值的范围

测试的时候发现不在范围的数值还是能够输入，加入判定

 

if(10<=num&&num<=100){                  ......        }else{         alert("输入的数值不在10-100，请修改");}

 

if(data.length>60){         alert("超过队列规定限制数量");          return false;}

 

Return false当超过60的时候直接跳出。

//数组表达方式变成height

liCreate.style.height = data[j]*2+"px";

 

通过这个方式显示对应数字的高度，进行可视化。

 

然后进行css底部对齐，

display: inline-block;

因为我的数据处理方式是先进行数组修改，再重新显示，所以要做排序的话，直接将处理好的数组进行排序就能完成。

Js自带排序算法sort();

不过我打算尝试其他的排序算法：

先搬一张图

 

这次就用最基础的冒泡排序

冒泡排序算法的运作如下：（从后往前）

1. 比较相邻的元素。如果第一个比第二个大，就交换他们两个。
2. 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
3. 针对所有的元素重复以上的步骤，除了最后一个。
4. 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较 

 

这博客非常好的直观得看到排序相关的知识。

对于排序可视化，达到直观看到排序效果

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

通过setInterval()来用毫秒周期使排序的步数清晰可见。clearInterval();可以停止周期

len = arr.length;for（i= 0;i
     
       数组[y+1],交换数组[y]和数组[y+1]               ......     }}
     

 

改成setInterval()方式

var timer = setInterval(function(){                if(i
     
       数组[y+1],交换数组[y]和数组[y+1]                             ......                           j++;                      }else{                        j = 0;                        i++;                      }                }else{                    clearInterval(timer);                }},500);
     

 

完整代码：