js排序动画模拟-插入排序

2023年6月11日上午12:28 • JavaScript

下面是“js排序动画模拟-插入排序”的完整攻略。

算法简介

插入排序是一种简单直观的排序算法，它的基本思想是将一个待排序的序列分成已经排好序的和未排序的两部分，每次取未排序序列中的第一个元素，插入到已排序序列中的适当位置，以此类推，直到全部元素排序完成。

算法步骤

插入排序的步骤如下：

将待排序序列第一个元素看作已经排好序的序列。
遍历待排序序列中的剩余元素，将其依次插入到已排好序的序列中。
插入过程中，从已排好序的序列的末尾开始向前比较，将待插入元素与已排序元素逐个比较，找到插入位置。
待插入元素插入到适当的位置后，已排好序的序列长度加1。
重复步骤2~4，直到待排序序列中的所有元素都插入到已排好序的序列中。

插入排序动画模拟

用JavaScript实现一个插入排序的动画模拟，可以更直观地了解插入排序的过程。具体实现步骤如下：

创建一个包含待排序数列的div容器。
在待排序数列容器中，为每个数值创建一个对应的div，用于显示它的大小。
创建一个显示排序过程的容器，用于显示每一步排序的过程。
创建一个按钮，用于触发排序动画。
在按钮的点击事件中，执行插入排序的动画模拟。

下面是一个简单的示例代码，供参考：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>插入排序动画模拟</title>
    <style>
        #container {
            margin: 50px auto;
            width: 400px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #eee;
            padding: 10px;
        }

        .num-box {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ccc;
            border: 1px solid #ccc;
        }

        #process {
            margin-top: 20px;
            width: 400px;
            height: 100px;
            background-color: #fff;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <button id="sort-btn">开始排序</button>
    <div id="process"></div>
    <script>
        // 创建一个随机数列
        let arr = [];
        for (let i = 0; i < 10; i++) {
            arr.push(Math.floor(Math.random() * 100));
        }

        // 在容器中显示数列
        let container = document.querySelector('#container');
        for (let i = 0; i < arr.length; i++) {
            let numBox = document.createElement('div');
            numBox.classList.add('num-box');
            numBox.style.width = arr[i] + 'px';
            numBox.innerText = arr[i];
            container.appendChild(numBox);
        }

        // 点击按钮触发排序动画
        let sortBtn = document.querySelector('#sort-btn');
        sortBtn.addEventListener('click', () => {
            let processDiv = document.querySelector('#process');
            insertSortAnim(arr, processDiv);
        });

        // 插入排序动画模拟
        async function insertSortAnim(arr, processDiv) {
            for (let i = 1; i < arr.length; i++) {
                let key = arr[i];
                let j = i - 1;
                while (j >= 0 && arr[j] > key) {
                    arr[j + 1] = arr[j];
                    j--;
                }
                arr[j + 1] = key;
                showProcess(arr, processDiv);
                await sleep(1000);
            }
        }

        // 在过程容器中显示排序过程
        function showProcess(arr, processDiv) {
            let processStr = arr.join(', ');
            let processP = document.createElement('p');
            processP.innerText = processStr;
            processDiv.appendChild(processP);
        }

        // sleep函数，用于等待一段时间后再继续执行
        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }
    </script>
</body>
</html>

在这个示例代码中，我们通过创建随机数列和显示数列的div来显示待排序的数列。在点击按钮事件中，我们调用了insertSortAnim函数，用于模拟插入排序的动画过程。

insertSortAnim函数的实现是一个异步函数，它通过循环遍历待排序的数列，每次将一个数值插入到已排序的数列中，并在过程容器中显示排序的过程。

在插入排序的过程中，我们通过sleep函数等待1秒钟，来模拟排序过程的延迟。同时，每一次排序过程完成后，我们都通过showProcess函数在过程容器中显示排序的过程。

通过这个示例代码，我们可以更直观地了解插入排序的过程，更好地学习算法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js排序动画模拟-插入排序 - Python技术站