原生JS 实现投掷骰子效果

慕遥慕遥

已于 2023-02-10 13:12:53 修改

阅读量2k

点赞数 4

文章标签： javascript html 前端

于 2022-08-14 17:16:11 首次发布

本文链接：https://blog.csdn.net/m0_64191440/article/details/126333600

版权

平常小伙伴玩游戏可能会接触投骰子

随机1~6位数判断大小来算输赢

今天我就用学习两天半的技术来写一个简陋的投骰子效果

思路：

1.准备7张图片（1~6点和一张动态骰子（gif）图）

2.获取标签

3.设定随机事件

代码如下：

<!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>
    <style>
      #btn {
        width: 80px;
        height: 35px;
        background-color: aquamarine;
        border: none;
        color: black;
        cursor: pointer;
        border-radius: 3px;
      }
      #btn:hover {
        background: rgba(118, 209, 179, 0.74);
      }
    </style>
  </head>
  <body>
    <img
      src="./img/1.png"
      alt=""
      style="width: 200px; height: 200px"
      id="img"
    />
    <button id="btn">开始摇摆</button>

    <script>
      var _btn = document.getElementById("btn");
      var _img = document.getElementById("img");

      //单击事件
      _btn.onclick = function () {
        //设置一个摇摆的图片
        _img.src = "./img/x.gif";

        setTimeout(function () {
          //随机点数
          var no = Math.ceil(Math.random() * 6);
          //设置图片
          _img.src = "./img/" + no + ".png";
        }, Math.ceil(Math.random() * 2000));
      };
    </script>
  </body>
</html>

效果如下：