我爱撸码，撸码使我感到快乐。
大家好，我是Counter。
本章带大家来简单的了解下原生JS实现转盘抽奖。
因为主要涉及到JS，在这里HTML和CSS起到的功能就没有那么重要，
因此，没有过多的阐述HTML与CSS，而JS基本每行都有注释，但这里CSS
也是起到了至关重要的一步，那就是控制背景色，以及结果的显示与隐藏，效果先给出，如下:
代码给出:
<!DOCTYPE html><html lang="zh"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>turntable</title> ???/*<link rel="stylesheet" href="css/index.css">*/ ???<!-- css --> ???<style> ???body, table, tr, td { ???????margin: 0; ???????padding: 0; ???} ???.wrapper { ???????position: relative; ???????width: 300px; ???????height: 300px; ???????margin: 100px auto 0; ???????text-align: center; ???} ???table { ???????display: inline-block; ???} ???td, th { ???????width: 100px; ???????height: 100px; ???????border: 1px solid #ccc; ???????border-radius: 20px; ???} ???th { ???????cursor: pointer; ???????user-select: none; ???} ???/* 设置标识样式 */ ???tr .active { ???????background-color: #ff6700; ???} ???/* 设置中奖结果 */ ???.results { ???????display: none; ???????position: absolute; ???????top: 0; ???????left: 50px; ???????width: 200px; ???????height: 100px; ???????border: 1px solid black; ???????border-radius: 30px; ???????text-align: center; ???????line-height: 100px; ???????background-color: skyblue; ???} ???</style></head><body> ???<div class="wrapper"> ???????<table> ???????????<tr> ???????????????<td class="active">今</td> ???????????????<td>天</td> ???????????????<td>吃</td> ???????????</tr> ???????????<tr> ???????????????<td>什</td> ???????????????<th id="play">开始</th> ???????????????<td>么</td> ???????????</tr> ???????????<tr> ???????????????<td>来</td> ???????????????<td>抽</td> ???????????????<td>下</td> ???????????</tr> ???????</table> ???????<div class="results">今天吃火锅</div> ???</div> ??<!-- <script src="js/index.js"></script> --> ??<!-- js --> ??<script> ???// 获取开始元素var playBtn = document.getElementById(‘play‘);// 获取所有td元素，获取到伪数组var tdAry = document.getElementsByTagName(‘td‘);// 将伪数组的长度存储在tdLen变量中var tdLen = tdAry.length;// 设置计时器变量，刚开始为空var startTime = null;// 自己构造数组，使橘红色背景能够按照自己想要的方向进行循环移动var tdList = [0, 1, 2, 4, 7, 6, 5, 3];// 设置橘红色背景标识var tdId = 0;// 设置已经奔跑的次数，刚开始为0次var time = 0;// 固定跑3圈，一圈8次var fixNum = 24// 定义最大随机数var MaxNum;// 定义随机数，开始和结束的阈值var randomNum;// 获取中奖结果元素var results = document.getElementsByClassName(‘results‘)[0];// 绑定点击事件，当鼠标点击开始按钮后，触发playStart函数playBtn.onclick = playStart;function playStart() { ???// 如果计时器不为空，那就意味着这个线程已经在跑了，就直接退出。 ???if (startTime != null) { ???????return; ???} ???results.style.display = ‘none‘; ???// 奔跑的次数 ???time = 0; ???// 最大随机数，取值[0, 8]，确保每个都能被选到 ???MaxNum = parseInt(Math.random() * 9) + fixNum; ???// 随机阈值，控制刚开始跑几步加速，以及剩几步减速，取值范围[3, 7] ???randomNum = parseInt(Math.random() * 5 + 3); ???// 开启计时器，每200毫秒执行一次move函数 ???startTime = setInterval(move,200); ???}function move() { ???// 每执行一次奔跑次数time就加1 ???time++; ???// 每次运行当前的背景色清空 ???tdAry[tdList[tdId]].className = ""; ???// 每执行一次背景色标识就加1 ???tdId++; ???// 判断如果标识大于7的话就标识tdId就等于0，否则的话就等于它本身，这个步骤如果没有进行判断和赋值的话，tdId就会一直自增下去，那么对应的td元素将没有，后台就会报错 ???tdId = tdId > 7 ? 0 : tdId; ???// 设置当前的td背景色 ???tdAry[tdList[tdId]].className = "active"; ???????//如果奔跑的次数等于随机阈值的话，那么当前的计时器清空，重新开启一个新的计时器，并且是每20毫秒执行一次，这个步骤是控制加速的 ????if (time == randomNum) { ???????clearInterval(startTime); ???????startTime = setInterval(move,20); ???} ???// 如果奔跑的次数加上随机的阈值的话，那么就将当前的加速的计时器清空，并且重新开启一个每200毫秒的计时器，这个步骤是控制减速的 ???if (time + randomNum >= MaxNum) { ???????clearInterval(startTime); ???????startTime = setInterval(move,200); ???} ???// 如果奔跑的次数大于等于最大的奔跑次数，那么清空当前计时器，并且计时器等于null，直接返回出去，一次抽奖结束。这个步骤是控制抽奖结束。 ???if (time >= MaxNum) { ???????clearInterval(startTime); ???????startTime = null; ???????// switch语句判断抽奖结果，这部分比较简单，就不赘述了。 ???????switch(tdList[tdId]) { ???????????case 0: ???????????????results.innerText = ‘今天吃转转乐‘; ???????????????results.style.display = ‘block‘; ???????????????break; ???????????case 1: ???????????????results.innerText = ‘今天吃蜀九香‘; ???????????????results.style.display = ‘block‘; ???????????????break; ???????????case 2: ???????????????results.innerText = ‘今天吃KFC‘; ???????????????results.style.display = ‘block‘; ???????????????break; ???????????case 4: ???????????????results.innerText = ‘今天吃海底捞‘; ???????????????results.style.display = ‘block‘; ???????????????break; ???????????case 7: ???????????????results.innerText = ‘今天吃外卖‘; ???????????????results.style.display = ‘block‘; ???????????????break; ???????????case 6: ???????????????results.innerText = ‘今天吃土‘; ???????????????results.style.display = ‘block‘; ???????????????break; ???????????case 5: ???????????????results.innerText = ‘今天吃牛排‘; ???????????????results.style.display = ‘block‘; ???????????????break; ???????????case 3: ???????????????results.innerText = ‘今天吃草本汤‘; ???????????????results.style.display = ‘block‘; ???????????????break; ???????} ???????return; ???}} ???</script></body></html>原生JS实现简易转盘抽奖
原文地址：https://www.cnblogs.com/Counterrr/p/10599291.html