首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript实现冒泡排序 可视化

JavaScript实现冒泡排序 可视化

作者头像
FEWY
发布2019-05-26 21:32:53
6530
发布2019-05-26 21:32:53
举报
文章被收录于专栏:FEWYFEWY

说明

上次写了 JavaScript实现冒泡排序 ,只是简单的说了冒泡排序算法是什么,怎么实现,这次来实现将冒泡排序的过程展现出来。

解释

先来个简单的版本,看效果图

实现这个效果,思路是这样的

1、先将需要排序的数组,进行冒泡排序,记录每一步的内容,存放在一个数组中

2、利用canvas,实现一个 darw 方法,能将一步的内容画到页面上

3、实现动画效果,利用定时器,每隔一段时间,调用 darw 方法,画出一步到页面上

实现这个效果还是需要会一点点canvas的,比如知道怎么画个长方形,怎么写几个字,换个颜色,如果不会的话,请到这里去看看。

代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    #main {
      width: 600px;
      height: 200px;
      position: relative;
    }
  </style>
</head>

<body>

  <div id="main">
    <canvas id="myCanvas" width="600" height="200"> </canvas>
  </div>
  <script>
    function bubbleSort(arr) {
      // 冒泡排序算法,对数组进行排序,同时记录每一步操作,保存在一个数组中
      function sort() {
        // virtualArr 用来存放 每一个步内容的数组
        var virtualArr = [arr.slice()];
        var max = arr.length;
        for (var i = 0; i < max; i++) {
          var done = true;
          for (var j = 0; j < max - i; j++) {
            if (arr[j] > arr[j + 1]) {
              var temp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = temp;
              done = false;
              virtualArr.push(arr.slice());
            }
          };
          if(done){
            break;
          };
        }
        return virtualArr;
      }

      // 绘画,调用一次就画出一步的图像 
      function darw(arr){
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        // 获取 canvas画板的高度(确定每个长方形的 y 值时需要)
        var maxWidth = canvas.height;
        // 每个长方形的宽度
        var width = 20;
        // 每个长方形之间的间隔
        var space =20;

        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 设置字体
        ctx.font = "18px serif";
        // 在页面上,画出一步的内容
        for (var i = 0; i < arr.length; i++) {
          ctx.fillStyle = '#61C5FE';
          // x 的 值等于 第i个长方形 * (长方形的宽+每个长方形的间隔)
          // y 的 值等于  画板的高度 - 第i的元素的值
          ctx.fillRect(i * (width+space), maxWidth - arr[i], width, arr[i]);
          ctx.fillStyle = '#240be4';
          // maxWidth - arr[i]-5,这里多- 5,是为了能让文字,在长方形上方一点显示,看的明显些
          ctx.fillText(arr[i], i * (width+space), maxWidth - arr[i]-5);
        }
      }

      // 动画 
      function animation() {
        // 调用sort 方法,返回包括每一步内容的数组
        var virtualArr = sort();
        var interval =500;
        // 遍历得到的数组,每隔500ms,调用darw 方法,画出一步内容
        virtualArr.forEach((item, index) => {
            setTimeout(() => darw(item), index * interval);
        });  
      }

      animation();
    }
    var arr = [50,40,20,10,10];
    bubbleSort(arr);
  </script>
</body>
</html>

看上面的代码,能看出,实现效果主要靠的是三个函数

1、sort,实现冒泡排序,返回包括每一步的数组

2、darw ,画出一步的内容

3、animation ,实现动画效果,定时调用darw 方法

上面实现的是比较简单的一版,下来看一版更加漂亮的,这是我在Codepen上找到的,改了些代码后,是这样了,看图

这一版比上一版要好看很多,但是思路其实一样,都是需要一个包含每一步内容的数组,遍历数组,定时执行操作,实现动画效果。不同的地方就在于,这一版把每一步分的更细了,每一步都有不同的类型。

这一版是使用vue做的,在vuex中的mutations定义了 6个方法 来实现效果

1、reset,重置,

2、swap,交换,实现图中两个绿色div,进行位移,

3、activate,激活,实现图中两个红色div,变成绿色,

4、deactivate,释放,实现图中两个绿色div,恢复成红色,

5、lock,锁定,实现找到一个最大值后,将它变成蓝色,

6、done,完成,返回 true 表示排序完成。

点这里下载代码 ,代码里加了很详细的注释,非常容易看懂。

总结

上面的两个版本的思路基本一样,用一句话概括就是,记录冒泡排序所有的改变,将这些改变一步一步的显示出来。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年04月02日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 说明
  • 解释
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档