极客观点
项目管理
HarmonyOS
我在做一个前端入门的练习，其中有一个task要求如下：
在页面上模拟一个队列，队列的每个元素是一个数字，点击添加按钮后用柱状图高度的形式表现出来
限制输入的数字在10-100
队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来
做到排序功能的时候我准备先实现一个简单的冒泡排序过程，需要一个类似于sleep()的方法一步一步展现冒泡过程，我在论坛上找了一个如下所示的实现方式：
function sleep(d){
for(var t = Date.now();Date.now() - t <= d;);
}
但运行结果并不如我所预期的是每一个循环都展现出来，而是在总的暂停时间过去后刷新一次页面，展示出排序结果，求指点，谢谢，全部代码如下：
html：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 1_18</title>
<style>
.list-block{
display:inline-block;
background-color:red;
color:white;
width:18px;
text-align:center;
line-height:30px;
margin:1px;
}
#list{
margin-top:2px;
}
</style>
</head>
<body>
<div>
<input type="text" name="num" id="input-label" />
<input type="button" value="右侧入" id="push-right" />
<input type="button" value="右侧出" id="pop-right" />
<input type="button" value="左侧入" id="push-left" />
<input type="button" value="左侧出" id="pop-left" />
<input type="button" value="排序" id="sort" />
</div>
<div id="list"></div>
<script src="scripts/task.js"></script>
</body>
</html>
script.js：
let list = document.querySelector("#list"); //获取队列父元素
function sleep(d){ //暂停函数
for(var t = Date.now();Date.now() - t <= d;);
}
function bubbleSort(){ //冒泡排序
let blockArr = list.childNodes; //获取柱子队列数组
let arrLength = blockArr.length; //获取数组长度，优化for循环
for(let i=0;i<arrLength;i++){ //正向遍历
for(let j=arrLength - 1;j>i;j--){ //从数组尾部开始遍历，把较小的元素往前移
if(blockArr[j].style.height < blockArr[j - 1].style.height){ //当后一元素比前一元素小时
//setTimeout(function(){list.insertBefore(blockArr[j],blockArr[j - 1])},500); 最开始想要实现暂停的方式
sleep(500); //暂停500毫秒
list.insertBefore(blockArr[j],blockArr[j - 1]); //交换元素
}
}
}
}
function isLegal(num){ //输入数字范围判断
if(num >= 10 && num <= 100)
return true;
else
return false;
}
function getArrLength(){ //队列长度范围判断
let blockArr = document.querySelectorAll(".list-block");
if(blockArr.length <= 60){
return false;
}else{
return true;
}
}
function rightInput(){ //队尾插入元素
let num = document.querySelector("#input-label").value; //获取输入值
console.log(parseInt(num)); //测试输出，下同
console.log(!isNaN(num));
if(getArrLength()){ //判断队列长度是否超长
alert("元素数量超过限制");
}else if(!isNaN(num) && isLegal(num)){ //输入数字检测
let newBlock = document.createElement("div"); //新建柱子div
newBlock.setAttribute('class','list-block'); //添加样式
newBlock.style.height = num; //设置高度属性
list.appendChild(newBlock); //添加为#list元素的子节点
}else{
alert("请输入10-100之间的数字！"); //弹出提示
}
}
function rightPop(){ //队尾出队列
alert(list.lastChild.style.height); //按照要求弹出删除元素的长度
//console.log(list.lastChild..style.height);
list.removeChild(list.lastChild); //删除队尾元素
}
function leftInput(){ //队首入队列
let num = document.querySelector("#input-label").value;
console.log(parseInt(num));
console.log(!isNaN(num));
if(getArrLength()){
alert("元素数量超过限制");
}else if(!isNaN(num) && isLegal(num)){
let newBlock = document.createElement("div");
newBlock.setAttribute('class','list-block');
newBlock.style.height = num;
list.insertBefore(newBlock,list.childNodes[0]);
}else{
alert("请输入10-100之间的数字！");
}
}
function leftPop(){ //队首出队列
alert(list.firstChild.style.height);
//console.log(list.lastChild..style.height);
list.removeChild(list.firstChild);
}
function init() {
let pushRight = document.querySelector("#push-right"); //绑定右侧入按钮点击事件
pushRight.addEventListener("click",rightInput);
let popRight = document.querySelector("#pop-right"); //绑定右侧出按钮点击事件
popRight.addEventListener("click",rightPop);
let pushLeft = document.querySelector("#push-left"); //绑定左侧入按钮点击事件
pushLeft.addEventListener("click",leftInput);
let popLeft = document.querySelector("#pop-left"); //绑定右侧出按钮点击事件
popLeft.addEventListener("click",leftPop);
list.addEventListener("click",function(e){ //单击柱子本身删除柱子事件代理
if(e.target && e.target.className == "list-block")
list.removeChild(e.target);
});
let sortBubble = document.querySelector("#sort"); //绑定排序按钮事件
sortBubble.addEventListener("click",bubbleSort);
}
/**
* 初始化函数
*/
init();
日经问题，请看这里：
当我用js给元素添加className时，浏览器发生了什么？
你的代码不怎么好看，我给你重写了一遍，你参考着看看吧：
https://jsfiddle.net/podya3ap/