摇色子效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摇色子</title>
    <style>
        #div1{
            width:100%;
            height:600px;
        }
        #div1 div{
            float:left;
            margin:10px;
        }
    </style>
</head>
<body>
<div id="div1">
</div>
<input type="button" value="更多的色子">
<input type="button" value="摇色子">
<input type="button" value="更少的色子">
<input type="button" value="stop">
<p><span id="oSpan">0</span>色子</p>
<p>总计<span id="oSpan2">0</span></p>
<script>
    var allInput=document.getElementsByTagName('input');
    var Num=0;
    var timer='';
    function random(min,max) {
        return parseInt(Math.random()*(max-min))+min;
    }
   allInput[0].onclick=function(){
        Num++;
        var oDiv=document.createElement('div');
        var ran=random(1,7);
        oDiv.setAttribute('ran',ran);
        oDiv.innerHTML='<img src="img/'+ran+'.gif">';
        div1.appendChild(oDiv);
        oSpan.innerHTML=Num;
        var Total=0;
        for(var i=0;i<div1.children.length;i++){
            Total+=Number(div1.children[i].getAttribute('ran'))
        }
        oSpan2.innerHTML=Total;
   };

   allInput[2].onclick=function(){
       allDiv=div1.children;
       Num--;
       if(div1.children.length=0){return;}
       div1.removeChild(allDiv[div1.children.length-1]);
       oSpan.innerHTML=Num;

       var Total=0;
       for(var i=0;i<div1.children.length;i++){
           Total+=Number(div1.children[i].getAttribute('ran'))
       }
       oSpan2.innerHTML=Total;
   };

   allInput[1].onclick=function(){
     clearInterval(timer);
     timer=setInterval(function(){
        var allDiv=div1.children;
        for(var i=0;i<allDiv.length;i++){
            var ran=random(1,7);
            allDiv[i].setAttribute('ran',ran);
            allDiv[i].children[0].src='img/'+ran+'.gif';
            var Total=0;
            for(var j=0;j<allDiv.length;j++){
                Total+=Number(allDiv[j].getAttribute('ran'));
            }
            oSpan2.innerHTML=Total;
        }
     },10)
   };

   allInput[3].onclick=function(){
        clearInterval(timer);
   }
</script>
</body>
</html>
猜你喜欢
