我刚写的一个图形化显示排序，大家帮忙看看

放在我的博客上了，地址：
http://www.zlong.org/js-practice/imgswap.html

暂时只有冒泡排序和快速排序，其他的以后会加上。

现在加上了合并排序，这个稍微有点麻烦，冒泡和快速有交换的，这个没有，不过还好，解决了。

加上了速度选择。

加上了堆排序、选择排序和插入排序。

这里的step并不是很准确，因为如在数组中，将a[10]插入到a[1]和a[2]之间，需要将a[2]到a[9]的元素全部后移，再将a[10]放到a[2]上，在页面中，只需要将a[10]直接插入到a[2]之前就行了。

评论

34 楼 tfwin2 2011-04-07  

很好，头一次看到，对排序了解太少！

33 楼 housheng33 2011-04-05  

雷锋多着了～
好雷锋

32 楼 findhappy7 2011-04-04  

怎么那么多人投 隐藏？？顶，，，

31 楼 ericslegend 2011-04-04  

牛逼，把速度调慢点就可以形象化的显示各个排序了，不过觉得柱状一个个往下减的效果有点~~

30 楼 Aaronlong31 2011-04-03  

jamesmos 写道

Aaronlong31 写道

jamesmos 写道

非常赞。

就细节上给出两或三点建议：
1. 增加步进功能。现在的速度还是太快了，如果有单步和单次的按钮，演示效果可能会更好。所谓单步，就是点一下动一下；单次，则是点了之后，当前这一个元素排好序就暂停下来。
2. 配合第一条，添加暂停/继续功能
*3. 我经过几次尝试才意识到speed那个数字其实是interval的时间间隔，但这真的很不直观，如果要做演示功能，用更容易理解的表达方式，比如帧/秒

谢谢你的建议，不过由于javascript没有像java那样的暂停方法，所以不是很好实现你要的效果。

加个全局变量，在每次setTimeout的时候检测一下就行。

其实我在对数组排序时，就设置好了setTimeout，当你看到图形化显示时，所有的setTimeout方法已经调用完了，这时候再去改变setTimeout里的时间，就不好改了。

29 楼 jamesmos 2011-04-02  

Aaronlong31 写道

jamesmos 写道

非常赞。

就细节上给出两或三点建议：
1. 增加步进功能。现在的速度还是太快了，如果有单步和单次的按钮，演示效果可能会更好。所谓单步，就是点一下动一下；单次，则是点了之后，当前这一个元素排好序就暂停下来。
2. 配合第一条，添加暂停/继续功能
*3. 我经过几次尝试才意识到speed那个数字其实是interval的时间间隔，但这真的很不直观，如果要做演示功能，用更容易理解的表达方式，比如帧/秒

谢谢你的建议，不过由于javascript没有像java那样的暂停方法，所以不是很好实现你要的效果。

加个全局变量，在每次setTimeout的时候检测一下就行。

28 楼 zhoushuping 2011-04-02  

赞一个

27 楼 Aaronlong31 2011-04-02  

jamesmos 写道

非常赞。

就细节上给出两或三点建议：
1. 增加步进功能。现在的速度还是太快了，如果有单步和单次的按钮，演示效果可能会更好。所谓单步，就是点一下动一下；单次，则是点了之后，当前这一个元素排好序就暂停下来。
2. 配合第一条，添加暂停/继续功能
*3. 我经过几次尝试才意识到speed那个数字其实是interval的时间间隔，但这真的很不直观，如果要做演示功能，用更容易理解的表达方式，比如帧/秒

谢谢你的建议，不过由于javascript没有像java那样的暂停方法，所以不是很好实现你要的效果。

26 楼 jamesmos 2011-04-02  

非常赞。

就细节上给出两或三点建议：
1. 增加步进功能。现在的速度还是太快了，如果有单步和单次的按钮，演示效果可能会更好。所谓单步，就是点一下动一下；单次，则是点了之后，当前这一个元素排好序就暂停下来。
2. 配合第一条，添加暂停/继续功能
*3. 我经过几次尝试才意识到speed那个数字其实是interval的时间间隔，但这真的很不直观，如果要做演示功能，用更容易理解的表达方式，比如帧/秒

25 楼 Aaronlong31 2011-04-02  

qzxfl008 写道

不错，不过我感觉有点快，我有个flash版的比较清楚

速度可以设置的，我待会加进去。

24 楼 qzxfl008 2011-04-02  

不错，不过我感觉有点快，我有个flash版的比较清楚

23 楼 qrg 2011-04-01  

哥看了，内牛满面...

22 楼 Aaronlong31 2011-04-01  

sdnasky 写道

D:\jdk1.6.0_20\demo\applets\SortDemo\example1.html

我以前还真没发现有这个文件的。

21 楼 zyl324 2011-04-01  

好想法，羡慕了。

20 楼 sdnasky 2011-04-01  

D:\jdk1.6.0_20\demo\applets\SortDemo\example1.html

19 楼 Aaronlong31 2011-04-01  

i2534 写道

注意限制下init的数目.我的FF4.0在400的情况下运行很缓慢.

我已经对Init的输入做了限制，最大500。
数多了，运行起来肯定有点慢的。

18 楼 i2534 2011-04-01  

注意限制下init的数目.我的FF4.0在400的情况下运行很缓慢.

17 楼 arrongao 2011-04-01  

不错,试一试

16 楼 zhangcs053 2011-04-01  

有一个网站也不错。http://coolshell.cn/articles/3933.html

15 楼 Aaronlong31 2011-04-01  

laitaogood 写道

哈，我开始还以为是楼主盗用日本那个程序员写的那个图形化排序算法呢。。。
那个网站我是在coolshell看到的

我之前是看了日本的那个，但没看源代码。我的这个只是效果和他的一样，内部的算法和js处理都是自己写的。