网址:https://algorithm-visualizer.org/
进去之后的页面是程序员熟悉的码农风格:
![1ee6dd197016dff0cfa3c3b82e85da17.png](https://i-blog.csdnimg.cn/blog_migrate/e3604fa4fcc6b24c4837aa8458049a72.jpeg)
假设我想学习冒泡排序算法,在搜索栏里输入sort,在结果列表里选择bubble sort:
![8a46f172b3635207b30206580ab3fac0.png](https://i-blog.csdnimg.cn/blog_migrate/aac6e4c7f8ac9a1ed8cd83eeb16639e3.jpeg)
点击之后,排序操作处于就绪状态,点击play开始:
![563ed4a47e0165227fe23653203ce573.png](https://i-blog.csdnimg.cn/blog_migrate/db7e9252a26b585e78868c0a31662fe6.jpeg)
![a64aab5f9f9e525816fb594316c2c719.png](https://i-blog.csdnimg.cn/blog_migrate/bd2b2d14fcad1ce464b950e6443953eb.jpeg)
![8741ff4b13a61711d57113d9f1398d58.png](https://i-blog.csdnimg.cn/blog_migrate/afb0b9c3174e5cbec5679ddad334ba2f.jpeg)
此时右边的JavaScript代码像我们平时单步调试一样逐行执行,同时每一步执行后排序的效果在屏幕正中实时显示:
![0be78e904e67f46b3f208f5a5889b527.png](https://i-blog.csdnimg.cn/blog_migrate/75ab687a351bb75a4709438ae5d8c0ca.jpeg)
比单步调试更强大之处是,我们能随时回退到前面的执行结果,通过下图高亮的84/144这个柱状开关控制。144意思是这个排序全过程总共要进行144次单步执行,当前已经执行了84步。自动播放的速度也可以在下图所示的Speed开关控制。
![bb4aa9e215b0e1bbd812fbd27a0ed855.png](https://i-blog.csdnimg.cn/blog_migrate/2b1c7d9a0cec6bf3dcd94d9336baafb9.jpeg)
这是非波拉契数列的生成动画:
![0d10bb0d0ae11f0725c05758e1fd521b.png](https://i-blog.csdnimg.cn/blog_migrate/98f7bfeceb4f15340c6263759c13d275.jpeg)
二叉树的遍历动画:
![f3bdd54f72c9ec7a6466f779434ecdff.png](https://i-blog.csdnimg.cn/blog_migrate/f18b43b5a6593fdd0f1251d405fb5ad3.jpeg)
Dijkstra迪杰斯特拉算法最短路径算法:
![33d47ec16045546b441376c69f7ba364.png](https://i-blog.csdnimg.cn/blog_migrate/9b7ab8cee1ca5b3d9a7f241e43218faf.jpeg)
有了这个网站,算法学习从此不再枯燥。这个网站的源代码是完全开源的,如果你有新的算法想给全世界的编程爱好者展示,可以按照Readme.md里定义的规范,提交您的动画。
https://github.com/algorithm-visualizer/algorithm-visualizer
截至2019年3月16日,已经有14000多个赞了,顺手去点一个吧。
![327d99785ae833c97d7c2dcb3d806cc0.png](https://i-blog.csdnimg.cn/blog_migrate/82979be870435a5eea13a6f553e569b6.jpeg)