使用canvas制作简易的数据结构核心算法演示系统——线性表(一)

最新推荐文章于 2024-04-17 11:02:17 发布

溪午不闻钟_

最新推荐文章于 2024-04-17 11:02:17 发布

阅读量304

点赞数 1

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

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

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

顺序表

顺序表是在计算机内存中以数组的形式保存的线性表，线性表的顺序存储是指用一组地址连续的存储单元依次存储线性表中的各个元素、使得线性表中在逻辑结构上相邻的数据元素存储在相邻的物理存储单元中，即通过数据元素物理存储的相邻关系来反映数据元素之间逻辑上的相邻关系，采用顺序存储结构的线性表通常称为顺序表。顺序表是将表中的结点依次存放在计算机内存中一组地址连续的存储单元中。

顺序表的插入

对于顺序表，在进行插入之前，首先需要找到待插入的位置，以递增有序的顺序表为例

	function SqlistInFind(a, x) {
        for (var i = 0; i < a.length; i++){
            if (x < a[i]){
                return i;
            }
        }
        return i;
    }

如上所示，查找插入位置时，按顺序遍历顺序表内所有元素，若找到大于待插入元素的元素，则返回当前位置，否则返回顺序表长度，即插入到最最后。

找到待插入位置之后，即调用进行插入操作的函数

	function SqlistInsert(a, p, x) {
        for (var i = a.length - 1; i >= p; i--) {
            a[i + 1] = a[i];
        }
        a[p] = x;
        return a;
    }

如上所示，p为待插入位置，插入函数将a[p]及其之后的所有元素后移一位，将待插入元素放在a[p]上。

在明确了上述两个核心函数之后，便可以很轻易地做出建议的插入操作演示系统

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            position: relative;
        }
        #canvas {
            position: absolute;
            border: 1px solid #ccc;
            left: 50%;
            transform: translate(-50%, 0);
        }
    </style>
</head>
<body>
<canvas id="canvas" width="900" height="600">

</canvas>
<input type="text" placeholder="请输入插入元素的值..." id="insertIuput">
<input type="button" id="insertButton" value="插入">
<br><br>
<input type="text" placeholder="请输入删除元素的值..." id="deleteIuput">
<input type="button" id="deleteButton" value="删除">
<br><br>
<p>注： 为确保演示效果，</p>
<p>默认最多十个元素</p>
</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 index = 0;
        var Sqlist = [];


        //插入操作
        $("#insertButton").click(function () {
            var pattern = /^(-)?\d+(\.\d+)?$/;

            if (Sqlist.length > 10){
                alert("表已满，不能再插入");
            } else if (pattern.exec($("#insertIuput").val()) == null || $("#insertIuput").val() == "") {
                //使用正则表达式判断输入的内容是否为数字
                alert("请输入正确的数字")
            } else {
                //寻找要插入的位置
                var position = SqlistInFind(Sqlist,parseInt($("#insertIuput").val()));
                console.log(position);
                //插入到指定位置
                Sqlist = SqlistInsert(Sqlist,position,parseInt($("#insertIuput").val()));
                console.log(Sqlist);
                //清空输入框
                $("#insertIuput").val("");

                //绘制操作
                //清空画布
                context.clearRect(0,0,900,600);
                //依次绘制
                for (var i = 0; i < Sqlist.length; i++){
                    context.save();
                    context.translate(62 * (i + 1),0);
                    if (i === position){
                        drawSqlist(context,Sqlist[i], "#FFFF00");
                    } else {
                        drawSqlist(context,Sqlist[i], "#FFFFFF");
                    }
                    context.restore();
                }
            }
        });
    };
</script>
</html>

注意，以上代码是使用input获取用户输入的待插入元素，此时应注意将字符串类型转换为数字类型，转换方法详见点击跳转

溪午不闻钟_

关注

1
点赞
踩
5

收藏

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

顺序表顺序表是在计算机内存中以数组的形式保存的线性表，线性表的顺序存储是指用一组地址连续的存储单元依次存储线性表中的各个元素、使得线性表中在逻辑结构上相邻的数据元素存储在相邻的物理存储单元中，即通过数据元素物理存储的相邻关系来反映数据元素之间逻辑上的相邻关系，采用顺序存储结构的线性表通常称为顺序表。顺序表是将表中的结点依次存放在计算机内存中一组地址连续的存储单元中。顺序表的插入对于顺序表...
复制链接

扫一扫