原生js实现简化版幸运大转盘

最新推荐文章于 2024-07-24 16:53:23 发布

stephen Curry_

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量761

点赞数

文章标签： html javascript css 前端 vscode

本文链接：https://blog.csdn.net/m0_65544665/article/details/127058053

版权

利用排他法

效果如下图:

具体代码及注释：

html部分:

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      #uls {
        width: 500px;
        height: 500px;
        margin: 50px auto;
      }
      li {
        width: 150px;
        height: 150px;
        background-color: skyblue;
        float: left;
        margin: 5px;
        list-style: none;
        text-align: center;
        line-height: 150px;
        color: rgb(235, 235, 235);
        font-size: 20px;
        font-weight: 600;
      }
      .light {
        width: 150px;
        height: 150px;
        background-color: #666666;
      }
      #uls > li > button {
        width: 50px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <ul id="uls">
      <li class="light">600元优惠券</li>
      <li>800元优惠券</li>
      <li>1000元优惠券</li>
      <li>600元优惠券</li>
      <li><button id="btn1">开始</button> <button id="btn2">结束</button></li>
      <li>2000元优惠券</li>
      <li>1500元优惠券</li>
      <li>900元优惠券</li>
      <li>10000元优惠券</li>
    </ul>
  </body>
</html>

JS部分：

<script>
  //获取id名为btn1的元素
  var btn1 = document.getElementById("btn1");
  //获取id名为btn2的元素
  var btn2 = document.getElementById("btn2");
  //创建一个数组  指的是转盘外圈的数字
  var array = [0, 1, 2, 5, 8, 7, 6, 3];
  var timer = null; //定时器
  var num = 0;
  // 找到页面的li
  var lis = document.getElementsByTagName("li");
  //当点击开始按钮时
  btn1.onclick = function () {
    clearInterval(timer); //提前清空定时器 避免叠加
    //放入定时器  每隔30 毫秒转动
    timer = setInterval(function () {
      // 利用排他法
      // 利用for of 循环遍历
      for (var item of lis) {
        //除了一个有.light类名效果,其他清空
        item.className = "";
      }
      //num++向后走
      num++;
      //如果num走到>=数组长度的时候,让num=0,这时候刚好转完一圈
      if (num >= array.length) {
        num = 0;
      }
      // 给每一个追加类名样式
      lis[array[num]].className = "light";
    }, 80);
  };
  // 结束按钮  清空定时器
  btn2.onclick = function () {
    clearInterval(timer);
  };
</script>

stephen Curry_

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
原生js实现简化版幸运大转盘

原生js实现简化版幸运大转盘
复制链接

扫一扫