任务描述
基于上一任务
限制输入的数字在10-100
队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
队列展现方式变化如图，直接用高度表示数字大小
实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来，参考见下方参考资料
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.content{
width: 800px;
height: 700px;
margin: 50px auto;
border-radius: 10px;
background: #ccc;
overflow: hidden;
}
.content input{
display: block;
height: 30px;
width: 300px;
margin: 50px auto;
}
.btn{
display: flex;
justify-content: space-around;
}
.btn button{
height: 40px;
width: 100px;
}
#list{
display: flex;
margin:50px auto;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
justify-content: space-around;
margin-top:50px ;
}
#list li{
height: 50px;
width: 50px;
line-height: 50px;
background: pink;
color: #fff;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<input type="" name="input" id="input" value="" />
<div class="btn">
<button>左侧插入</button>
<button>右侧插入</button>
<button>左侧移除</button>
<button>右侧移除</button>
</div>
<ul id="list">
</ul>
</div>
<script type="text/javascript">
var data=[55,25,15];
var list=document.getElementById("list");
var int=document.getElementById("input");
var btn=document.querySelectorAll('.btn button');
btn.forEach(function(el,index){
el.addEventListener('click',function(){
var val=int.value;
var length=data.length;
if(index==0){
if(val<10||val>100){alert('只能输入10到100中间的值');return}
if(length>=60){alert("元素最多为60个");return}
data.unshift(val);
}
if(index==1){
if(val<10||val>100){alert('只能输入10到100中间的值');return}
if(length>=60){alert("元素最多为60个");return}
data.push(val);
}
if(index==2){
data.shift();
}
if(index==3){
data.pop();
}
render();
})
})
function render(){
var html='';
data.forEach(function(el){
html+='<li style="height:'+el*3+'px"></li>'
})
list.innerHTML=html;
var lis=list.querySelectorAll('li');
lis.forEach(function(ev,index){
ev.addEventListener('click',function(){
list.removeChild(ev);
data.splice(index,1);
})
})
}
render();
</script>
</body>
</html>
可视化排序就不写了，以前写过了，原理就是把每次交换的值记录下来，添加到一个数组中，等排序完成，利用定时器去实现
网友评论