猿问

动画冒泡排序算法

我正在尝试制作一个简单的冒泡排序算法动画。我有几个里面有文字的 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>&nbsp; <head>&nbsp; &nbsp; <meta charset="UTF-8" />&nbsp; &nbsp; <meta&nbsp; &nbsp; &nbsp; name="viewport"&nbsp; &nbsp; &nbsp; content="width=&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; , initial-scale=1.0"&nbsp; &nbsp; />&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge" />&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; .box1 {&nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; background: red;&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; &nbsp; &nbsp; transition: transform 1s linear;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; p {&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; color: yellow;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <div class=" box1">&nbsp; &nbsp; &nbsp; <p>8</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box1">&nbsp; &nbsp; &nbsp; <p>2</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box1">&nbsp; &nbsp; &nbsp; <p>12</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box1">&nbsp; &nbsp; &nbsp; <p>10</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box1">&nbsp; &nbsp; &nbsp; <p>2</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box1">&nbsp; &nbsp; &nbsp; <p>1</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; var divs = document.getElementsByTagName("div");&nbsp; &nbsp; &nbsp; var firstNumberHTML = divs[0].getElementsByTagName("p");&nbsp; &nbsp; &nbsp; var maxNumberDiv = divs[0];&nbsp; &nbsp; &nbsp; var maxNumber = Number(firstNumberHTML[0].innerHTML);&nbsp; &nbsp; &nbsp; async function bubbleSort (){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;for (var i = 1; i < divs.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let currentNumberHTML = divs[i].getElementsByTagName("p");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let number = Number(currentNumberHTML[0].innerHTML);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;await new Promise(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setTimeout(() => res("delay"), 1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; &nbsp; &nbsp; if (maxNumber > number) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const offset = divs[i].getBoundingClientRect().x -&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxNumberDiv.getBoundingClientRect().x;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let prevTranslateMaxDiv = maxNumberDiv.style.transform.replace("translateX","").replace("(","").replace(")", "").replace("px", "");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prevTranslateMaxDiv = Number(prevTranslateMaxDiv) === NaN ? 0: Number(prevTranslateMaxDiv);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxNumberDiv.style.transform = `translateX(${prevTranslateMaxDiv + offset}px)`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; divs[i].style.transform = `translateX(-${offset}px)`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxNumberDiv = divs[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxNumber = number;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; bubbleSort();&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; </script>&nbsp; </body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答