摇色子效果

最新推荐文章于 2022-08-30 21:35:20 发布

sjy7329

最新推荐文章于 2022-08-30 21:35:20 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sunjynyue/article/details/84236907

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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].οnclick=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].οnclick=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].οnclick=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].οnclick=function(){
        clearInterval(timer);
   }
</script>
</body>
</html>

sjy7329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
摇色子效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;摇色子&lt;/title&gt; &lt;style&gt; #div1{ width:10
复制链接

扫一扫