我正在尝试制作一个简单的冒泡排序算法动画。我有几个里面有文字的 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>
1 回答
慕尼黑8549860
TA贡献1818条经验 获得超11个赞
如果您使用的是最新浏览器，您可以尝试以下操作（自包含的 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>
添加回答
举报
0/150
提交
取消