动画冒泡排序算法
我正在尝试制作一个简单的冒泡排序算法动画。我有几个里面有文字的 div：https : //codepen.io/menezesr08/pen/pozYMKG
我的目标是交换 div 内的文本，因为算法正在执行交换。我最初的方法是获取所有 div，遍历它们并在进行交换时更改“innerHTML”。这个 html 更改发生得太快了，所以有没有办法减慢它的速度，使其看起来像动画？
<div class="box">
<p>8</p>
</div>
<div class="box">
<p>2</p>
</div>
<div class="box">
<p>10</p>
</div>
<div class="box">
<p>12</p>
</div>
慕森王浏览 126回答 1
1回答
-
慕尼黑8549860
如果您使用的是最新浏览器，您可以尝试以下操作（自包含的 css 和 JS）。使用带有 async/await 语法的 CSS 转换和 promise。您可以直接在此处运行代码片段。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width= , initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .box1 { height: 100px; width: 100px; background: red; display: inline-block; vertical-align: middle; transition: transform 1s linear; } p { text-align: center; color: yellow; font-size: 30px; } </style> </head> <body> <div class=" box1"> <p>8</p> </div> <div class="box1"> <p>2</p> </div> <div class="box1"> <p>12</p> </div> <div class="box1"> <p>10</p> </div> <div class="box1"> <p>2</p> </div> <div class="box1"> <p>1</p> </div> <script> var divs = document.getElementsByTagName("div"); var firstNumberHTML = divs[0].getElementsByTagName("p"); var maxNumberDiv = divs[0]; var maxNumber = Number(firstNumberHTML[0].innerHTML); async function bubbleSort (){ for (var i = 1; i < divs.length; i++) { let currentNumberHTML = divs[i].getElementsByTagName("p"); let number = Number(currentNumberHTML[0].innerHTML); await new Promise(res => { setTimeout(() => res("delay"), 1000); }) if (maxNumber > number) { const offset = divs[i].getBoundingClientRect().x - maxNumberDiv.getBoundingClientRect().x; let prevTranslateMaxDiv = maxNumberDiv.style.transform.replace("translateX","").replace("(","").replace(")", "").replace("px", ""); prevTranslateMaxDiv = Number(prevTranslateMaxDiv) === NaN ? 0: Number(prevTranslateMaxDiv); maxNumberDiv.style.transform = `translateX(${prevTranslateMaxDiv + offset}px)`; divs[i].style.transform = `translateX(-${offset}px)`; } else { maxNumberDiv = divs[i]; maxNumber = number; } } } bubbleSort(); </script> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript