<!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>
js中變量作用域的問題，下面的input放哪里最好，為什么？
oldwan
2016-06-29 10:34:10
