摇骰子（无bug版）文末附图片素材

最新推荐文章于 2024-11-04 14:04:25 发布

87小太阳

最新推荐文章于 2024-11-04 14:04:25 发布

阅读量221

点赞数

分类专栏： JS小游戏案例 JS案例文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_53798158/article/details/127821693

版权

JS案例同时被 2 个专栏收录

19 篇文章

订阅专栏

JS小游戏案例

5 篇文章

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的网页版骰子模拟器。用户可以通过点击按钮开始和停止随机滚动三个骰子，每次滚动都会生成1到6之间的随机数值，并更新对应图片的src属性。代码中实现了防止连续点击导致多个定时器执行的问题，确保了定时器的正确开启和停止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./sai1.png" width=100 height=100 alt="1" id="one">
    <img src="./sai2.png" width=100 height=100 alt="1" id="two">
    <img src="./sai3.png" width=100 height=100 alt="1" id="three">

    <!-- 必须不断的修改src的路径  -->
    <!-- sai.png固定 1 2 3 4 5 6  -->
    <!-- 随机值    -->
    <!-- 三个骰子 需要生成三个随机值    1~6  -->
    <!-- 间歇定时器 实现没隔多长时间执行依次 -->
    <button id="btn1" onclick="zhuan()">开始</button>
    <button id="btn2" onclick="stop()">停止</button>
    <!-- 连续点击会同时执行多个定时器  多个定时器之间时间间隔小  感到很快 -->
    <!-- 无法停止 就是不知道停止哪一个定时器   -->
    <script>
        var i = 0;
        var btn1 = document.querySelector("#btn1");
        var btn2 = document.querySelector("#btn2");
        function zhuan(){
            i = setInterval("change()",100);
            btn1.removeAttribute("onclick");
            btn2.setAttribute("onclick","stop()");
        }

        function change(){
            var first = Math.floor(Math.random()*6+1);
            var second = Math.floor(Math.random()*6+1);
            var third  = Math.floor(Math.random()*6+1);
            document.getElementById('one').src = './sai'+first+'.png';
            document.getElementById('two').src = './sai'+second+'.png';
            document.getElementById('three').src = './sai'+third+'.png';
        }
        // change()

        function stop(){
            clearInterval(i);
            btn2.removeAttribute("onclick");
            btn1.setAttribute("onclick","zhuan()");
        }
    </script>

</body>
</html>

附图片素材