js之转动的骰子模型-CSDN博客

本文链接：https://blog.csdn.net/weixin_42575020/article/details/81155898

创建一个自动随机生成骰子数的模型，因为需要引入图片这里将图片省去了，自己导入图片即可验证代码

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--创建对象-->
        <div id="c1">
            <img src="img/img/sai3.png" />
        </div>
        <div id="c2">
            <img src="img/img/sai4.png" />
        </div>
    <div id="c5">
        <img src="img/img/sai5.png" />
    </div>
        <input type="button" value="开始" id="button1" onclick="tst()"/>
        <input type="button" value="停止" id="button2" onclick="stop()"/>
        <script type="text/javascript">
        //先获取对象，并声明一个全局变量，留给setTimeout（）函数使用
        var bt1=document.getElementById("button1");
        var bt2=document.getElementById("button2");
        var ims=document.getElementsByTagName("img");
        var a;
        //开始的函数
        function  tst(){
            var num=Math.floor(Math.random()*6+1)
            for (var i=0;i<3;i++) {
                ims[i].src="img/img/sai"+num+".png";
            }a=setTimeout(tst,500);
            //点击一次后，再次点击没有效果
            bt1.removeAttribute("onclick")
        }
        function stop(){
            clearTimeout(a)
            //点击一次后，回复开始按钮的功能
            bt1.setAttribute("onclick","tst()")
        }
        </script>
    </body>
</html>