js队列排序

任务描述

l  基于上一任务

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

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

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

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

 

 

1. <input type="number" name="num" id="num" value="" max="100" min="10"/>

设置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. 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较 

 

http://www.cnblogs.com/dushao/p/6004883.html 这博客非常好的直观得看到排序相关的知识。

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

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

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

len = arr.length;

for（i= 0;i<len;i++）{

     for (j = 0;j<len;j++){

               //数组[y]> 数组[y+1],交换数组[y]和数组[y+1]
               ......

     }
}

 

改成setInterval()方式

var timer = setInterval(function(){

                if(i<len){

                      if(j<len-1){

                              //数组[y]> 数组[y+1],交换数组[y]和数组[y+1]
                             ......

                           j++;

                      }else{

                        j = 0;

                        i++;

                      }
                }else{

                    clearInterval(timer);

                }
},500);

 

完整代码：https://github.com/moeeliu/ife/blob/master/js5.html