ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

闲着没事做,用js做了一个冒泡排序的动画

2021-06-14 21:04:06  阅读:162  来源: 互联网

标签:function arr ol 闲着没事 i1 冒泡排序 js let context


<!DOCTYPE html>

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        let arr = [];
        function draw() {
            arr.forEach((item, index) => {
                // $("#context ol").append("<li style='height:" + item + "px;left:" + index * 30 + "px'>" + item + "</li>")
                $("#context ol").append("<li style='height:" + item + "px'>" + item + "</li>")
            })

        }

        function mark(i1, i2) {
            $($("#context ol li")[i1]).css("background-color", "#faa755");
            $($("#context ol li")[i2]).css("background-color", "#faa755");
        }
        function removeMark(i1, i2) {
            $($("#context ol li")[i1]).css("background-color", "black");
            $($("#context ol li")[i2]).css("background-color", "black");
        }
        function swap(i1, i2) {
            let liArr = $("#context ol").find("li").toArray();
            let temp = liArr[i1]
            liArr[i1] = liArr[i2]
            liArr[i2] = temp
            $("#context ol").empty()
            $("#context ol").append(liArr)
        }
        function sleep(time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }


        async function sort() {
            let next;
            //升序排序
            for (let i = 0; i < arr.length - 1; i++) {
                for (let j = 0; j < arr.length - 1 - i; j++) {

                    mark(j, j + 1)
                    if (arr[j] > arr[j + 1]) {
                        let temp = arr[j]
                        arr[j] = arr[j + 1]
                        arr[j + 1] = temp
                        swap(j,j+1)
                    }
                    await sleep(100)
                    removeMark(j, j + 1)

                }

            }

            arr.forEach(item => console.log(item))
            $("#message").text("成功了!")
        }



        $(function () {
            for (let i = 0; i < 20; i++) {
                arr.push(Math.floor(Math.random() * 80) + 20)
            }
            draw()
            sort()
        })
    </script>
    <style>
        #context {
            width: 1000px;
            height: 300px;
        }

        #context ol li {
            background-color: black;
            display: inline-block;
            color: white;
            margin-right: 10px;
            vertical-align: bottom;
        }
    </style>
</head>
<html>
<div id="context">
    <ol>

    </ol>
</div>
<div id="message">

</div>
</html>

标签:function,arr,ol,闲着没事,i1,冒泡排序,js,let,context
来源: https://www.cnblogs.com/huisunan/p/14883277.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有