使用canvas制作简易的数据结构核心算法演示系统——排序(二)——冒泡排序

最新推荐文章于 2021-04-04 11:01:41 发布

溪午不闻钟_

最新推荐文章于 2021-04-04 11:01:41 发布

阅读量195

点赞数

分类专栏：前端文章标签： html5 css javascript html

本文链接：https://blog.csdn.net/bruce_zhao1407/article/details/105450325

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

冒泡排序

冒泡排序（Bubble Sort）重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端（升序或降序排列），就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名“冒泡排序”

冒泡排序核心代码

for(i=0;i<array.length-1;i++){
	flag=0;
    for(j=0;j<array.length-i-1;j++)
    {
	    if(array[j]>array[j+1])
	    {
	    	temp=array[j];
	        array[j]=array[j+1];
	        array[j+1]=temp;
	        flag=1;
	    }
	}
    if (flag==0)
    	break;
}

了解了冒泡排序的核心代码后，便可以借助canvas绘制出一个简易的直接插入排序的操作演示系统，以下是代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../components/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <style>
        body{
            position: relative;
        }
        #canvas {
            position: absolute;
            border: 1px solid #ccc;
            left: 50%;
            transform: translate(-50%, 0);
        }
        #operateInsert{
            width:200px;
            margin-top: 10px;
            margin-left: 10px;
        }
        #insert,#sort{
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="alert alert-info" role="alert" style="text-align: center">
    注： 为确保演示效果，默认最多演示十个元素
</div>
<canvas id="canvas" width="1000" height="500">

</canvas>

<input type="text" class="form-control" placeholder="请输入插入元素的值..." id="operateInsert">
<br>
<button type="button" id="insert" class="btn btn-primary">插入</button>
<button type="button" id="sort" class="btn btn-primary">排序</button>
<br><br>

</body>
<script src="../components/js/jquery.min.js"></script>
<script src="../components/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script src="../components/js/draw.js"></script>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        //判断浏览器是否支持canvas
        if (canvas.getContext("2d")) {
            var context = canvas.getContext("2d");
        } else {
            alert("当前浏览器不支持canvas，请更换浏览器稍后再试")
        }

        var array = [];
        var times=0;
        drawInsertSort(context,array,-1);

        //插入操作
        $("#insert").click(function () {
            var pattern = /^(-)?\d+(\.\d+)?$/;
            if(array.length>=10){
                alert("警告：为保证演示质量，默认最多添加10个元素");
            } else if (pattern.exec($("#operateInsert").val()) == null||$("#operateInsert").val()==""){
                alert("请输入正确的数字");
            } else {
                array[array.length]=$("#operateInsert").val();
                drawInsertSort(context,array,-1,times,false);
                //将数组中字符类型转换为数字类型
                for(var i=0;i<array.length;i++){
                    array[i]=parseInt(array[i]);
                }
                $("#operateInsert").val("");
            }
        });

        //排序操作
        $("#sort").click(function () {
            //每排序一次清空一次画布
            context.clearRect(0,0,1000,500);
            drawInsertSort(context,array,-1,times,false);
            var i,j,temp,flag;
            i=0;
            var bubbleSortInterval=setInterval(function () {
                flag=0;
                for(j=0;j<array.length-i-1;j++)
                {
                    if(array[j]>array[j+1])
                    {
                        temp=array[j];
                        array[j]=array[j+1];
                        array[j+1]=temp;
                        flag=1;
                    }
                }
                if (flag===0)
                    clearInterval(bubbleSortInterval);
                drawInsertSort(context,array,j,i+1,true);
                i++;
                if(i>=array.length)
                    clearInterval(bubbleSortInterval);
            },1000);
            

        })



    };


</script>
</html>

溪午不闻钟_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用canvas制作简易的数据结构核心算法演示系统——排序(二)——冒泡排序

冒泡排序冒泡排序（Bubble Sort）重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端（升序或降序排列），就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名“冒泡排序”...
复制链接

扫一扫