使用canvas制作简易的数据结构核心算法演示系统——查找(二)——二分查找

最新推荐文章于 2023-03-13 18:40:04 发布

溪午不闻钟_

最新推荐文章于 2023-03-13 18:40:04 发布

阅读量191

点赞数

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

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

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

二分查找

二分查找也称折半查找（Binary Search），它是一种效率较高的查找方法。但是，折半查找要求线性表必须采用顺序存储结构，而且表中元素按关键字有序排列。

二分查找执行过程

首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步查找前一子表，否则进一步查找后一子表。重复以上过程，直到找到满足条件的记录，使查找成功，或直到子表不存在为止，此时查找不成功。

二分查找核心代码

int binSearch(int R[],int low, int high,int k)
{
	int mid;
	while(low<=high)
	{
		mid=(low+high)/2;
		if(R[mid]==k)
			return mid;
		else if(R[mid]>k)
			high=mid-1;
		else
			low-mid+1;
	}
	return 0;
}

了解了顺序查找的核心代码后，便可以借助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 index=0;
        drawInsertSort(context,array,-1);

        //插入操作
        $("#insert").click(function () {
            var pattern = /^(-)?\d+(\.\d+)?$/;
            if(index>0){
                console.log(parseInt($("#operateInsert").val())<array[index-1]);
            }
            if(array.length>=14){
                alert("警告：为保证演示质量，默认最多添加14个元素");
            } else if (pattern.exec($("#operateInsert").val()) == null||$("#operateInsert").val()==""){
                alert("请输入正确的数字");
            } else if((index>0)&&(parseInt($("#operateInsert").val())<array[index-1])){
                alert("请有序插入数字，本系统采用递增序列！");
            } else {
                index++;
                array[array.length]=$("#operateInsert").val();
                drawSearchArrray(context,array,-1);
                //将数组中字符类型转换为数字类型
                for(var i=0;i<array.length;i++){
                    array[i]=parseInt(array[i]);
                }
                $("#operateInsert").val("");
            }


        });

        $("#sort").click(function () {
            //每排序一次清空一次画布
            context.clearRect(0,0,1000,500);
            drawSearchArrray(context,array,-1);
            var pattern = /^(-)?\d+(\.\d+)?$/;
            if (pattern.exec($("#operateInsert").val()) == null||$("#operateInsert").val()=="") {
                alert("请输入正确的数字");
            } else {
                //设置从数组的中间开始
                var i,j,mid;
                mid=parseInt(array.length/2);
                i=0;
                j=array.length-1;
                var searchItem=parseInt($("#operateInsert").val());
                var flag=0;
                var orderSearchTimer=setInterval(function () {
                    if (flag===0){
                        context.clearRect(0,0,1000,500);
                        drawSearchArrray(context,array,-1);
                        drawSearchItem(context,searchItem,50+mid*75,150,"#fff","#0000ff");
                        if(i>j){
                            // 查找失败
                            flag=2;
                        }
                        else if (searchItem<array[mid]){
                            //要查找的元素在中间元素之前
                            mid=parseInt((i+mid)/2);
                            j=mid-1;
                        } else if (searchItem>array[mid]){
                            //要找的元素在中间元素之前
                            mid=parseInt((mid+j)/2);
                            i=mid+1;
                        } else {
                            //查找成功
                            context.clearRect(0,0,1000,500);
                            drawSearchArrray(context,array,mid);
                            drawSearchItem(context,searchItem,50+mid*75,150,"#ffff00","#ff0000");
                            flag=1;
                        }
                    } else if(flag===1){
                        alert("查找成功,"+searchItem+"是当前数组中的第"+mid+"号元素");
                        clearInterval(orderSearchTimer);
                    } else {
                        alert("查找失败，当前数组中不存在值为"+searchItem+"的元素");
                        context.clearRect(0,0,1000,500);
                        drawSearchArrray(context,array,-1);
                        clearInterval(orderSearchTimer);
                    }

                },1000);

            }
            $("#operateInsert").val("");
        })
    };


</script>
</html>

溪午不闻钟_

关注

0
点赞
踩
1

收藏

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

二分查找二分查找也称折半查找（Binary Search），它是一种效率较高的查找方法。但是，折半查找要求线性表必须采用顺序存储结构，而且表中元素按关键字有序排列。二分查找执行过程首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步查找前一子表，否...
复制链接

扫一扫