js双色球（写着玩的）

Js双色球

代码

点击查看代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双色球</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 700px;
        margin: 0 auto;
      }
      div.content {
        display: flex;
      }
      .ball {
        width: 90px;
        margin: 5px;
        height: 90px;
        border-radius: 50%;
        font-size: 36px;
        color: white;
        text-align: center;
        line-height: 90px;
      }
      .red {
        background-color: red;
      }
      .blue {
        background-color: blue;
      }
      .option {
        margin: 20px 0;
        text-align: center;
      }
      .option button {
        width: 120px;
        height: 40px;
      }
    </style>
  </head>

  <script>
    window.onload = function () {
      let btnClick = document.querySelector("#btnClick");
      let redBalls = document.querySelectorAll(".red");
      let blueBall = document.querySelector(".blue");
      let flag = 0;
      btnClick.onclick = function () {
        if (flag == 0) {
          this.innerText = "停止";
          flag = 1;
          n = setInterval(() => {
            let reds = getRedNumber();
            reds.forEach((value, index) => {
              redBalls[index].innerText = value;
            });
            blueBall.innerText = 1 + parseInt(Math.random() * 16);
          }, 50);
        } else {
          this.innerText = "开始";
          flag = 0;
          clearInterval(n);
          alert("卧槽，你中奖了");
          alert("骗你的煞笔");
        }
      };
    };

    function getRedNumber() {
      let reds = [];
      reds[0] = 1 + parseInt(Math.random() * 33);
      //用来生成剩余的五个数字
      while (reds.length < 6) {
        let tNum = 1 + parseInt(Math.random() * 33);
        //用来判断是否有重复的数字
        let flag = false;
        for (let j = 0; j < reds.length; j++) {
          if (tNum == reds[j]) {
            flag = true;
            break;
          }
        }
        if (!flag) {
          reds.push(tNum);
        }
      }
      reds.sort((a, b) => {
        return a - b;
      });
      return reds;
    }
  </script>
  <body>
    <div class="container">
      <div class="option">
        <button type="button" id="btnClick">开始</button>
      </div>
      <div class="content">
        <div class="ball red">8</div>
        <div class="ball red">8</div>
        <div class="ball red">8</div>
        <div class="ball red">8</div>
        <div class="ball red">8</div>
        <div class="ball red">8</div>
        <div class="ball blue">8</div>
      </div>
    </div>
  </body>
</html>
posted @ 2023-12-15 17:28  FAIGEL  阅读(40)  评论(0)    收藏  举报