九宫格抽奖（原生js）-阿里云开发者社区

九宫格抽奖（原生js）

2023-07-11 93

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 九宫格抽奖（原生js）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 340px;
        height: 340px;
        border: 1px pink solid;
        position: relative;
        margin: 100px;
      }
      .box div {
        width: 100px;
        height: 100px;
        background-color: aqua;
        text-align: center;
        line-height: 100px;
      }
      .div1 {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      .div2 {
        position: absolute;
        top: 10px;
        left: 120px;
      }
      .div3 {
        position: absolute;
        top: 10px;
        left: 230px;
      }
      .div4 {
        position: absolute;
        top: 120px;
        left: 230px;
      }
      .div5 {
        position: absolute;
        top: 230px;
        left: 230px;
      }
      .div6 {
        position: absolute;
        top: 230px;
        left: 120px;
      }
      .div7 {
        position: absolute;
        top: 230px;
        left: 10px;
      }
      .div8 {
        position: absolute;
        top: 120px;
        left: 10px;
      }
      .button {
        width: 100px;
        height: 100px;
        background-color: pink;
        text-align: center;
        line-height: 100px;
        position: absolute;
        top: 120px;
        left: 120px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="div1">口红</div>
      <div class="div2">包包</div>
      <div class="div3">裙子</div>
      <div class="div4">美甲</div>
      <div class="div5">草莓</div>
      <div class="div6">奶茶</div>
      <div class="div7">苹果手机</div>
      <div class="div8">谢谢参与</div>
      <strong class="button">点击抽奖</strong>
    </div>
    <script>
      // 提出点击抽奖
      let button = document.getElementsByClassName('button')[0];
      // 下标[0]
      let k = 0;
      // 提出大div
      let box = document.getElementsByClassName('box')[0];
      // 提出大div中的所有div
      let prize = box.getElementsByTagName("div");
      // 定时器时间
      let time = 200;
      // 调用定时器
      let int;
      let num = 0;
      let count = 0;
      let rom = 0;
      // 点击抽奖执行函数
      button.onclick = function() {
        prize[k].style.backgroundColor = "red";
        rom = Math.floor(Math.random() * prize.length);
        int = setInterval(scrolls, time);
      }
      function scrolls() {
        if (k < prize.length - 1) {
          k++;
          prize[k - 1].style.backgroundColor = "aqua";
          prize[k].style.backgroundColor = "red";
        } else {
          k = 0;
          prize[prize.length - 1].style.backgroundColor = "aqua";
          prize[k].style.backgroundColor = "red";
        }
        if (count < 5) {
          if (time <= 100) {
            time = 100;
          } else {
            time -= 20;
          }
        } else {
          if (time >= 500) {
            time = 500;
          } else {
            time += 20;
          }
        }
        if (num == 7) {
          num = 0;
          count++;
        } else {
          num++;
        }
        if (count > 8 && rom == num) {
          clearInterval(int);
        } else {
          clearInterval(int);
          int = setInterval(scrolls, time);
        }
        console.log("随机数", rom);
        console.log("圈数", count);
      }
    </script>
  </body>
</html>

九宫格抽奖（原生js）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

九宫格抽奖（原生js）

热门文章

最新文章

相关课程

相关电子书

相关实验场景