JS-定时器-节点属性操作-事件绑定-幸运大转盘-CSDN博客

本文链接：https://blog.csdn.net/weixin_45080761/article/details/111188672

本文详细介绍了如何使用HTML5、CSS3和JavaScript实现一个交互式的幸运大转盘动画效果。通过设置路径数组模拟顺时针转动，结合定时器控制转动速度，以及按钮事件监听实现开始和结束功能。用户点击开始按钮后，转盘会按照预设路径转动，点击结束按钮则停止并显示结果。此外，文章还提供了效果视频链接和各个状态界面的截图，帮助读者更好地理解和实现该效果。

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

幸运大转盘

实现思路

HTML搭建基础框架
CSS设置静态样式
获取按钮及元素节点
给开始按钮绑定事件
每次点击先将开始按钮置为不可用状态，以避免多次点击造成程序混乱
设置定时器，用于每隔一定的时间，执行样式切换，做出移动效果
每次先将当前格子样式清空
在当前格子的位置上+1，“走到”下一个格子
将“下一个”格子的样式，设置为“当前样式”
给结束按钮绑定事件
每次点击先恢复开始按钮为可点击状态，为下次点击做准备
清除定时器，让转盘停止“转动”
将当前格子、计数器、第一个格子恢复为初始状态

效果视频链接 https://live.csdn.net/v/139309

关键步骤

设置路径数组，用于存放转动路径
- li 浮动形成的9宫格布局，利用JS获取的li元素集合时，从上往下的下标如下。
- 为了形成顺时针的转动效果，需要人为设置路径[0, 1, 2, 5, 8, 7, 6, 3]。
设置计数器，用于计数现在走到第几个格子
- 从0开始，步长为1，总长为7，表示走了8个格子（除了中间被按钮占据的格子）。
- 如若总长超过7，则需要将计数器重置为0，以便实现循环转动效果。
- 先用计数器从路径数组中取出下标，再利用获取的下标，获取li集合中对应的元素。

HTML 与 CSS

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>幸运大转盘</title>
   <style>
       /* 公共样式 */
       * {
           padding: 0;
           margin: 0;
       }

       li {
           list-style: none;
       }

       .clear:after {
           content: '';
           display: block;
           clear: both;
       }

       /* container 样式 */
       .container {
           width: 500px;
           margin: 0 auto;
           /* border: 1px solid red; */
       }

       .container .luck li {
           float: left;
           margin-left: 10px;
           margin-top: 10px;
           color: #ffffff;
           font-size: 18px;
           /* font-weight: bold; */
           width: 150px;
           height: 150px;
           line-height: 150px;
           text-align: center;
           background-color: #50b1f1;
       }

       .container .luck li.active {
           background-color: #1e1e1e;
       }

       #btn {
           background-color: #fff;
       }

       #btn button {
           background-color: #928c8c;
           border: none;
           border-radius: 10px;
           outline: none;
           color: #ffffff;
           width: 70px;
           height: 70px;
           cursor: pointer;
       }

       #btn button.unusable {
           background-color: #e0e0e0;
       }
   </style>
</head>

<body>
   <div class="container">
       <ul class="luck clear">
           <li class="active">华为Mate40</li>
           <li>格力空调</li>
           <li>美的电磁炉</li>
           <li>美的电饭煲</li>
           <li id="btn">
               <button>开始</button>
               <button>停止</button>
           </li>
           <li>雅阁电动车</li>
           <li>小米平衡车</li>
           <li>电动牙刷</li>
           <li>谢谢参与</li>
       </ul>
   </div>
</body>

</html>

javascript

// 获取按钮元素
var startBtn = document.querySelectorAll('button')[0];
console.log(startBtn);
var endBtn = document.querySelectorAll('button')[1];
console.log(endBtn);

// 设置变量用于接收定时器
var timer;
// 获取转动元素
var lis = document.querySelectorAll('li');
console.log(lis);
// 设置路径数组，用于存放转动路径
var arrPath = [0, 1, 2, 5, 8, 7, 6, 3]
// 设置计数器，用于计数现在走到第几个格子
var num = 0;

// 给开始按钮绑定点击事件
startBtn.onclick = function () {
    // console.log(1);
    // 每次点击先将按钮置为不可用状态，以避免多次点击造成程序混乱
    this.disabled = true;
    // 同时将样式设置为“不可用”样式，提醒用户，当前按钮不可用
    this.className = 'unusable';

    // 设置定时器，用于每隔50ms循环转动
    timer = setInterval(function () {
        // 每次先将当前格子的样式清空
        lis[arrPath[num]].className = '';

        // 判断计数器是否小于7，是则加一，否则说明格子已经走过了，超过8个格子，需要重置为0
        if (num < 7) {
            num++;
        } else {
            num = 0;
        }
        // 将下一个格子的样式修改为“当前”样式
        lis[arrPath[num]].className = 'active';
    }, 50);

        }

// 给结束按钮绑定点击事件
endBtn.onclick = function () {
    // console.log(2);
    // 点击结束按钮时，先恢复开始按钮为可点击状态，为下次点击做准备
    startBtn.disabled = false;
    // 清空开始按钮的“不可用”样式，提醒用户，当前按钮可点击
    startBtn.className = '';

    // 清除定时器，让转盘停止转动
    clearInterval(timer);

    // 弹框提示用户所获奖品
    if (lis[arrPath[num]].innerHTML == "谢谢参与") {
        alert('抱歉，您此次未中奖，继续努力。');
    } else {
        alert('恭喜您获得' + lis[arrPath[num]].innerHTML);
    }

    // 将当前格子置为初始状态
    lis[arrPath[num]].className = '';
    // 将计数器置为初始状态
    num = 0;
    // 将第一个格子恢复初始状态
    lis[arrPath[num]].className = 'active';
}