使用canvas制作简易的数据结构核心算法演示系统——排序(三)——简单选择排序

最新推荐文章于 2020-05-31 15:34:53 发布

溪午不闻钟_

最新推荐文章于 2020-05-31 15:34:53 发布

阅读量233

点赞数

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

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

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

选择排序

选择排序（Selection sort）是一种简单直观的排序算法。它的工作原理是：第一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，然后再从剩余的未排序元素中寻找到最小（大）元素，然后放到已排序的序列的末尾。以此类推，直到全部待排序的数据元素的个数为零。

选择排序核心代码

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

了解了简单选择排序的核心代码后，便可以借助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,k;
            i=0;
            var selectSortInterval=setInterval(function () {
                k=i;
                for(j=i+1;j<array.length;j++)
                {
                    console.log(j);
                    if(array[k]>array[j]){
                        k=j;
                        //console.log("23");
                    }
                }
                console.log(array);
                if (i!==k){
                    temp=array[i];
                    array[i]=array[k];
                    array[k]=temp;
                }
                console.log(array);
                drawInsertSort(context,array,i,i+1,true);
                i++;
                if (i>=array.length)
                    clearInterval(selectSortInterval);
            },1000);
            

        })
    };


</script>
</html>

溪午不闻钟_

关注

0
点赞
踩
0

收藏

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

选择排序选择排序（Selection sort）是一种简单直观的排序算法。它的工作原理是：第一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，然后再从剩余的未排序元素中寻找到最小（大）元素，然后放到已排序的序列的末尾。以此类推，直到全部待排序的数据元素的个数为零。选择排序核心代码for(i=0;i<array.length;i++){ k=i; ...
复制链接

扫一扫