排序算法的可视化

最新推荐文章于 2023-01-05 08:36:39 发布

廿四桥明月夜

最新推荐文章于 2023-01-05 08:36:39 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签：排序算法可视化

本文链接：https://blog.csdn.net/u012207345/article/details/82493038

版权

前端专栏收录该内容

106 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>携程第三题-排序算法可视化展示</title>
</head>
<style>
    .container {
        position: relative;
    }

    .sort {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 50px;
        height: 50px;
        border: 1px solid black;
        transition: 2s;
    }
</style>
<body>
<div class="container"></div>
<script>
    let arr = [5, 4, 8, 9, 6, 5, 4, 12, 3, 6, 7, 8, 56];
    let docFrag = document.createDocumentFragment();
    arr.forEach((value, index) => {
        let subDiv = document.createElement("div");
        subDiv.innerText = `${value}`;
        subDiv.classList.add("sort");
        subDiv.style.left = `${index * 60}px`;
        docFrag.appendChild(subDiv);
    });
    let containerDiv = document.querySelector(".container");
    containerDiv.appendChild(docFrag);

    let sortedElements = Array.prototype.slice.call(containerDiv.childNodes);
    console.log(arr);
    bubbleSort(arr);
    console.log(arr);

    function bubbleSort(items) {

        let len = items.length;
        let stop;
        let time = 0
        for (let i = 0; i < len; i++) {
            for (let j = 0, stop = len - i; j < stop; j++) {
                if (items[j] > items[j + 1]) {
                    swapArrElement(arr, j, j + 1);
                    setTimeout(() => {
                        swapDomText(sortedElements, j, j + 1);
                    }, time * 2000);
                    time++;
                }
            }
        }
        return items;
    }

    function swapArrElement(items, firstIndex, secondIndex) {
        // let _temp = items[firstIndex];
        // items[firstIndex]= items[secondIndex];
        // items[secondIndex] = _temp;
        [items[firstIndex], items[secondIndex]] = [items[secondIndex], items[firstIndex]];
    }

    function swapDomText(sortedElements, firstIndex, secondIndex) {
        debugger
        let _temp = sortedElements[firstIndex].innerText;
        sortedElements[firstIndex].innerText = sortedElements[secondIndex].innerText;
        sortedElements[secondIndex].innerText = _temp;

    }
</script>
</body>
</html>

总结：1、知识点要多用多练。学了就是要用，在使用中熟练。
2、体会绝对定位的作用，setTimeout的使用，脚本化样式表的强大。

廿四桥明月夜

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
排序算法的可视化

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;携程第三题-排序算法可视化展示&lt;/title&gt;&lt;/head&gt;&lt;style&gt; .
复制链接

扫一扫