task19之可视化冒泡排序的实现任务总结
2017-08-14 11:29
274 查看
task19和task18差不多,就是多了一个可视化排序,还有就是判断输入是否合法的条件多了一些。
代码:https://github.com/sunyueru/IFE/tree/master/task19
demo:https://sunyueru.github.io/IFE/task19/task19.html
写这个任务最头痛的就是如何实现可视化排序,其实现在我自己也不是特别会啊,都是review了别人的代码然后搞懂那种,自己写还是没有什么其他好的思路。网上也有一些资料,但是还是说的云里雾里。要么就是知乎上一些很酷炫的可视化,可是对我这种基础来说又太难了。这个问题之后还会追加,目前就写了冒泡,之后再补上快排,选择这些吧。
先就分析一些别人的实现思路吧,其实几种排序数据结构都学过,也不难。关键是怎么实现可视化呢???
/ 可视化排序过程 function BubbleSort(){ //alert("bubble"); var timer=null; var i=0,j=1,temp; //alert(data.length); timer=setInterval(function(){ if(i<data.length){ if(j<data.length){ if(data[i]<data[j]){ temp=data[i]; data[i]=data[j]; data[j]=temp; draw(); } j++; 4000 }else{ i++; j=i+1; } }else{ clearInterval(timer); // return; } },50) }
如果按照一般的冒泡写两层for循环,那是看不到可视化的结果的。所以这里是通过if语句,遍历执行,执行一次排序就调用一次draw()函数。也就是说边执行排序边绘制。同时还要设置setInterval,每隔多久就执行一次排序函数。但是我这个写的看不清每一趟左右两边的交换过程。反正这个可视化排序还需要继续优化。
还有一个问题就是打乱随机出数字,这里用到的是math.random,简单总结一下:
function mess(){ for(var i=0;i<10;i++){ data[i]=Math.floor(Math.random()*90+10); } draw(); }
math.random()会返回0-1之间的数字,如果你需要随机从a-b的范围生成一组数字,那么就是:
Math.random()*(b-a)+a这样的模式就可以了。
这里也是先操作数组,最后绘制data数组的。
相关文章推荐
- Spring定时任务实现方式总结
- spring+quartz实现定时任务遇到问题总结(bean无法注入)
- 延迟任务的实现总结
- 冒泡排序、选择排序、堆排序、快速排序、插入排序算法复杂度分析与算法实现(自己总结与转)
- 冒泡排序、选择排序、堆排序、快速排序、插入排序算法复杂度分析与算法实现(自己总结与转)
- 定时任务实现方式总结
- shell脚本中数组用法总结及脚本实现冒泡排序
- 定时任务实现总结
- Atitit 三种并发编程模型 艾龙 attilax总结 1. 并发系统可以使用不同的并发模型去实现。 1 2. 并行工作者 并行工作者模型。进来的任务分配给不同的工作者 银行模式 2 2.1.
- js实现队列的操作以及对队列中数字的冒泡排序的可视化
- 延迟任务的实现总结
- 数据结构与算法分析笔记与总结(java实现)--排序1:冒泡排序练习题
- 延迟任务的实现总结
- 定时任务实现方法总结与分析
- 排序算法总结(冒泡排序、直接插入排序、希尔排序)(python实现)
- 定时任务实现方法总结与分析
- NLP︱词向量经验总结(功能作用、高维可视化、R语言实现、大规模语料、延伸拓展)
- 经典内部排序算法学习总结(算法思想、可视化、Java代码实现、改进、复杂度分析、稳定性分析)
- C#--第2周实验--任务12--输入10个数存入数组中,然后实现冒泡排序
- [原创]反调试技巧总结-原理和实现(1)(2)(3)(4)(5)(6)......