携程前端第三题之模拟排序动画

最新推荐文章于 2024-05-12 23:59:28 发布

Wonder233

最新推荐文章于 2024-05-12 23:59:28 发布

阅读量365

点赞数

分类专栏： JavaScript 文章标签：排序动画冒泡排序

本文链接：https://blog.csdn.net/Wonder233/article/details/82503048

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排序动画演示</title>
    <style>
        .container {
            height: 100px;
            width: 800px;
            position: relative;
            margin: 50px auto;
            text-align: center;
        }

        /* 采用绝对定位的理由：
         * 绝对定位可以让元素脱离文档流，能够尽量减少重排，而且绝对定位的位置方便计算。
         * 使用 fixed 也可以的。
         *
         * 动画的持续时间设置为 1s
         */

        .sort {
            position: absolute;
            width: 50px;
            height: 50px;
            line-height: 50px;
            border: 1px solid black;
            transition: 1s;
        }
    </style>
</head>

<body>
    <div class="container">
    </div>
</body>

<script>
    // 1.首先将待排序元素输出到界面
    var arr = [5, 4, 8, 9, 6, 5, 4, 12, 3, 6, 7, 8, 56];
    var len = arr.length;

    var container = document.querySelector('.container');
    var fragment = document.createDocumentFragment(); // 创建文档片段，尽量减少重绘和重排
    for (let i = 0; i < len; i++) {
        var node = document.createElement('div');
        node.className = 'sort';
        node.id = i; // 这个后面移动位置的时候需要用到
        node.style.left = i * 60 + 'px';
        node.innerHTML = arr[i];
        fragment.append(node);
    }
    container.append(fragment);

    // 采用冒泡排序
    var time = 1;
    for (let i = 0; i < len; i++) {
        for (let j = len - 1; j > i; j--) {
            if (arr[j - 1] > arr[j]) {
                [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
                // 交换要交换位置的两个 dom 元素
                swap(j - 1, j, time);
                time++;
            }
        }
    }

    function swap(x, y) {
        setTimeout(function() {
            var xNode = document.getElementById(x)
            var yNode = document.getElementById(y);
            [xNode.style.left, yNode.style.left] = [yNode.style.left, xNode.style.left];
            [xNode.id, yNode.id] = [yNode.id, xNode.id];
        }, time * 1000)
    }
</script>

</html>

Wonder233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
携程前端第三题之模拟排序动画

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录