代码 ：
Bubble Sort Animation 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; }Bubble Sort Animation
Starting Bubble Sort...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 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();
登录后复制
以上就是使用html css和js的动画进行冒泡排序的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2664496.html
