当前位置：首页 > 文章列表 > 文章 > 前端 > 使用html css和js的动画进行冒泡排序

使用html css和js的动画进行冒泡排序

来源：dev.to 2024-10-17 08:00:35 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《使用html css和js的动画进行冒泡排序》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble Sort Animation</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #1c1c1c;
            color: white;
            font-family: Arial, sans-serif;
            height: 100vh;
            margin: 0;
        }

        h1 {
            margin-bottom: 100px;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .ball {
            width: 70px;
            height: 70px;
            background-color: black;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 18px;
            transition: transform 1.5s ease, box-shadow 1.5s ease;
        }

        .comparing {
            box-shadow: 0px 0px 20px 5px yellow;
            transform: translateY(-20px); /* Move upward */
        }

        .swapping {
            box-shadow: 0px 0px 20px 5px red;
            transform: translateY(20px); /* Move downward for swap effect */
        }

        .sorted {
            background-color: green;
        }

        .description {
            margin-top: 60px;
            font-size: 25px;
            color:yellow;

        }
    </style>
</head>
<body>

<h1>Bubble Sort Animation</h1>
<div class="container" id="balls-container"></div>
<div class="description" id="description">Starting Bubble Sort...</div>

<script>
    const array = [5, 3, 8, 4, 2, 6];  // Initial array
    const container = document.getElementById("balls-container");
    const description = document.getElementById("description");

    // Function to create the circular balls representing the array
    function createBalls() {
        container.innerHTML = '';
        array.forEach((value, index) => {
            const ball = document.createElement("div");
            ball.classList.add("ball");
            ball.textContent = value;
            ball.setAttribute("id", `ball-${index}`);
            container.appendChild(ball);
        });
    }

    // Function to swap elements in the DOM
    function swapElements(idx1, idx2) {
        const ball1 = document.getElementById(`ball-${idx1}`);
        const ball2 = document.getElementById(`ball-${idx2}`);
        const tempText = ball1.textContent;

        ball1.textContent = ball2.textContent;
        ball2.textContent = tempText;
    }

    // Bubble Sort Algorithm with Animation
    async function bubbleSort() {
        let n = array.length;
        for (let i = 0; i < n; i++) {
            for (let j = 0; j < n - i - 1; j++) {
                // Highlight comparing elements
                const ball1 = document.getElementById(`ball-${j}`);
                const ball2 = document.getElementById(`ball-${j + 1}`);
                ball1.classList.add("comparing");
                ball2.classList.add("comparing");
                description.textContent = `Comparing: ${array[j]} and ${array[j + 1]}`;

                await new Promise(resolve => setTimeout(resolve, 3000));  // Slower animation

                // Compare and swap if necessary
                if (array[j] > array[j + 1]) {
                    description.textContent = `Swapping: ${array[j]} and ${array[j + 1]}`;
                    [array[j], array[j + 1]] = [array[j + 1], array[j]];
                    swapElements(j, j + 1);

                    ball1.classList.add("swapping");
                    ball2.classList.add("swapping");
                    await new Promise(resolve => setTimeout(resolve, 2000));
                }

                // Remove comparison and swapping highlights
                ball1.classList.remove("comparing", "swapping");
                ball2.classList.remove("comparing", "swapping");
            }
            // Mark the last sorted element
            document.getElementById(`ball-${n - i - 1}`).classList.add("sorted");
        }
        description.textContent = "Array is sorted!";
    }

    // Initialize and start the animation
    createBalls();
    bubbleSort();
</script>

</body>
</html>

好了，本文到此结束，带大家了解了《使用html css和js的动画进行冒泡排序》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

版本声明

本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除