<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{display: inline-block;width: 8px;padding:5px;margin-left:2px;color: #fff; font-size: 8px;text-align: center;}
ul{display: flex;height: 180px;align-items: flex-end;padding:2px;}
</style>
</head>
<body>
<input type="text" id="inputbox"/>
<button id="leftin">左边入</button>
<button id="rightin">右边入</button>
<button id="rightout">右边出</button>
<button id="leftout">左边出</button>
<button id="random">随机生成数组</button>
<button id="sortdata">排序</button>
<br/>
<ul id="list"></ul>
<script type="text/javascript">
var data=[];
var container=document.getElementById("list");
// input=document.getElementById("inputbox").value.trim();
function rancolor(){
var colors=["grey"];
var i=Math.floor(Math.random()*colors.length);
return colors[i];
}
function updata(){
container.innerHTML="";
for (var i = 0; i <data.length; i++) {
var lielement=document.createElement("li");
lielement.innerText=data[i];
lielement.style.height=data[i]*1.6+"px";
lielement.style.backgroundColor=rancolor();
lielement.setAttribute("id","li-"+i);
container.appendChild(lielement);
}
document.getElementById("inputbox").value="";
}
function inputnum(){
// input=document.getElementById("inputbox").value.trim();
if (data.length>60) {alert("数据已满！");return 0;}
if (input=="") {alert("请先输入数字！");return 0;}
if (input>=100||input<9) {alert("请输入0-99的数字！");return 0;}
if (isNaN(input)) {alert("请输入正确的数字！");return 0;}
}
document.getElementById("leftin").onclick=function(){
// input=document.getElementById("inputbox").value.trim();
if (inputnum()==0) {
return;
}else{
data.splice(0,0,input);
updata();
}
}
document.getElementById("rightin").onclick=function(){
// input=document.getElementById("inputbox").value.trim();
if (inputnum()==0) return;
data.push(input);
updata();
}
document.getElementById("leftout").onclick=function(){
alert(data.splice(0,1));
updata();
}
document.getElementById("rightout").onclick=function(){
alert(data.pop());
updata();
}
container.addEventListener("click",function(e){
if (e.target.nodeName!=="LI") {
return;
}else{
var liid=parseInt(e.target.getAttribute("id").substr(3));
data.splice(liid,1);
updata();
}
})
document.getElementById("random").onclick=function(){
data.length=0;
for (var i = 0; i <50; i++) {
data[i]=Math.floor(Math.random()*91+9);
}
updata();
}
document.getElementById("sortdata").onclick=function(){
var i=0,
j=1,
temp;
len=data.length;
timer=null;
timer=setInterval(run,2);
function run(){
if (i<len) {
if (j<len) {
if (data[i]>data[j]) {
temp=data[i];
data[i]=data[j];
data[j]=temp;
updata();
}else{j++;}
}else{i++;j=i+1;}
}else{clearInterval(timer);return;}
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消