标签:function arr ol 闲着没事 i1 冒泡排序 js let context
<!DOCTYPE html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let arr = [];
function draw() {
arr.forEach((item, index) => {
// $("#context ol").append("<li style='height:" + item + "px;left:" + index * 30 + "px'>" + item + "</li>")
$("#context ol").append("<li style='height:" + item + "px'>" + item + "</li>")
})
}
function mark(i1, i2) {
$($("#context ol li")[i1]).css("background-color", "#faa755");
$($("#context ol li")[i2]).css("background-color", "#faa755");
}
function removeMark(i1, i2) {
$($("#context ol li")[i1]).css("background-color", "black");
$($("#context ol li")[i2]).css("background-color", "black");
}
function swap(i1, i2) {
let liArr = $("#context ol").find("li").toArray();
let temp = liArr[i1]
liArr[i1] = liArr[i2]
liArr[i2] = temp
$("#context ol").empty()
$("#context ol").append(liArr)
}
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
async function sort() {
let next;
//升序排序
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
mark(j, j + 1)
if (arr[j] > arr[j + 1]) {
let temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
swap(j,j+1)
}
await sleep(100)
removeMark(j, j + 1)
}
}
arr.forEach(item => console.log(item))
$("#message").text("成功了!")
}
$(function () {
for (let i = 0; i < 20; i++) {
arr.push(Math.floor(Math.random() * 80) + 20)
}
draw()
sort()
})
</script>
<style>
#context {
width: 1000px;
height: 300px;
}
#context ol li {
background-color: black;
display: inline-block;
color: white;
margin-right: 10px;
vertical-align: bottom;
}
</style>
</head>
<html>
<div id="context">
<ol>
</ol>
</div>
<div id="message">
</div>
</html>
标签:function,arr,ol,闲着没事,i1,冒泡排序,js,let,context 来源: https://www.cnblogs.com/huisunan/p/14883277.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。