JavaScript实现冒泡（选择、快速）排序可视化

最新推荐文章于 2022-12-31 12:57:28 发布

原创

最新推荐文章于 2022-12-31 12:57:28 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用JavaScript实现冒泡、选择和快速排序的可视化过程。通过关键代码展示如何将排序的每一步动态渲染到HTML页面，以实现排序算法的可视化效果。作者在实践中意识到代码组织的重要性，并计划通过阅读书籍来提升自己的编程技能。

最近在跟着百度前端技术学院做任务，要将队列图形冒泡排序，并用可视化的方法表现出来。

开始单纯的以为实现了冒泡排序图案会自己动起来，后来才发现还是太年轻。

实现可视化的关键问题在与怎么将排序的每一步渲染到HTML上。

看了下网上的方法，下面是关键代码：

//触发排序按钮，判断value是bubble/select/quick,执行对应的函数
        for(var t=0;t<btn_sort.length;t++){
            btn_sort[t].onclick=function () {
                var spans = pCon.getElementsByTagName('span');
                var arr = [];
                for (var i = 0; i < spans.length; i++) {
                    arr.push(parseInt(spans[i].style.height));
                }
                if(this.value=