来到大学也是有二年了，吃饭最多的地方就是在食堂，经过这么久的时间，已经几乎是把每个窗口的菜都吃腻了，所以我打算做个轮盘抽奖的形式来决定我每天要吃些什么。
目录
实现效果图：
静态搭建
js代码
1.实现此功能的思路：
2.先获取需要用到的dom元素，定义一些会用到的变量
3.给按钮绑定一个点击事件，触发轮盘旋转
4.实现函数
5.我大概说说实现思路
完整代码
总结
实现效果图：
静态搭建
html结构
<div class="box">
<ul>
<!-- 注意这里的类名是按照旋转速度来规范的 : item_index 为了方便我们后续再写js代码操作时更方便-->
<li class="item_1">iphone14</li>
<li class="item_2">冰箱</li>
<li class="item_3">洗衣机</li>
<li class="item_8">代金券</li>
<li class="btn" style="background-color: #fff;">
<button style="margin: 14px; width: 120px;height: 120px;background-color: pink;border: #fff;">点击抽奖</button>
</li>
<li class="item_4">电脑</li>
<li class="item_7">电视</li>
<li class="item_6">空调</li>
<li class="item_5">特斯拉</li>
</ul>
<!-- 这里到时候放中奖信息的文字 -->
<div class="text"></div>
</div>我这里的类名命名是为了后面改变它们的类名时更好的操作，所以就是按照轮盘旋转的顺序来依次命名的
css
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
margin: 100px auto;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
list-style: none;
width: 150px;
height: 150px;
background-color: beige;
margin: 5px;
font-size: 25px;
text-align: center;
line-height: 150px;
}
ul li img {
width: 100%;
height: 100%;
}
.text {
text-align: center;
margin-top: 20px;
font-size: 25px;
color: red;
}
.active {
background-color: rgb(93, 221, 157);
}css也是简单的美化了一下页面，active是旋转时要切换的颜色，其他的就是一些居中布局等
js代码
1.实现此功能的思路：
主要就是需要写一个执行函数，此函数的主要功能就是对选中的 li 元素进行类名的增删操作，主要还是使用一个定时器来实现此功能。
2.先获取需要用到的dom元素，定义一些会用到的变量
const obj = {
text: document.querySelector('.text'),
btn: document.querySelector('.btn'),
}
const item = document.querySelectorAll('ul li')
let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 10; // 转动时间间隔
let times; // 总转动次数
let sum = 0; //计算切换总次数3.给按钮绑定一个点击事件，触发轮盘旋转
//按钮点击事件
obj.btn.addEventListener('click', () => {
obj.text.innerHTML = ''; //清空文字
times = parseInt(Math.random() * (20 - 30 + 1) + 50, 10); // 定义总转动次数，随机40 - 60次
console.log(times);
time = 0 //每次点击需要将这几个数字进行初始化
sum = 0
spin()
})4.实现函数
function spin() {
time++; // 转动次数加1
sum++; //总转动次数加1
//判断time是否大于8
time = time > 8 ? 1 : time;
//先清空其他的带有active类的li
item.forEach(item => {
item.classList.remove('active')
})
clearTimeout(rollTime);
//给带有类名item_1的加上类名
document.querySelector(`.item_${time}`).classList.add('active')
rollTime = setTimeout(() => {
window.requestAnimationFrame(spin); // 进行递归动画 这段代码的作用是启动一个动画帧，以便在浏览器中渲染动画效果。动画帧是通过调用requestAnimationFrame()方法实现的，它允许你在动画帧中执行代码，而不是直接设置元素的样式。这样可以确保在渲染过程中不会出现跳帧的情况，从而实现毫秒级的渲染效果。
}, speed * sum)
if (sum === times) {
clearTimeout(rollTime); //清除定时器
//找出带有active类名的文字
const active = document.querySelector('.active').innerHTML
obj.text.innerHTML = `恭喜你抽中了${active}`
return
}
}代码中也有一些相应的注释
5.我大概说说实现思路
总共有8的物品，所以我们要对time标使进行判断，如果大于8就要变为1，然后是循环遍历将所有的active类名清除，这里清除上一个定时器是因为在定时器中用到了递归渲染，所以要清除上一个定时器，否则可能会出现卡顿的情况，最后就是做判断退出函数，渲染页面， window.requestAnimationFrame(spin)的作用在代码注释中有，主要也是为了渲染更流畅不出现卡顿，这里直接调用递归也是ok的
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
margin: 100px auto;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
list-style: none;
width: 150px;
height: 150px;
background-color: beige;
margin: 5px;
font-size: 25px;
text-align: center;
line-height: 150px;
}
ul li img {
width: 100%;
height: 100%;
}
.text {
text-align: center;
margin-top: 20px;
font-size: 25px;
color: red;
}
.active {
background-color: rgb(93, 221, 157);
}
</style>
</head>
<body>
<div class="box">
<ul>
<!-- 注意这里的类名是按照旋转速度来规范的 : item_index 为了方便我们后续再写js代码操作时更方便-->
<li class="item_1">iphone14</li>
<li class="item_2">冰箱</li>
<li class="item_3">洗衣机</li>
<li class="item_8">代金券</li>
<li class="btn" style="background-color: #fff;">
<button style="margin: 14px; width: 120px;height: 120px;background-color: pink;border: #fff;">点击抽奖</button>
</li>
<li class="item_4">电脑</li>
<li class="item_7">电视</li>
<li class="item_6">空调</li>
<li class="item_5">特斯拉</li>
</ul>
<!-- 这里到时候放中奖信息的文字 -->
<div class="text"></div>
</div>
<script>
//简易的抽奖功能
const obj = {
text: document.querySelector('.text'),
btn: document.querySelector('.btn'),
}
const item = document.querySelectorAll('ul li')
let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 10; // 转动时间间隔
let times; // 总转动次数
let sum = 0; //计算切换总次数
//按钮点击事件
obj.btn.addEventListener('click', () => {
obj.text.innerHTML = ''; //清空文字
times = parseInt(Math.random() * (20 - 30 + 1) + 50, 10); // 定义总转动次数，随机20-30次
console.log(times);
time = 0
sum = 0
spin()
})
//写一个函数用来模拟轮盘抽奖，旋转次数也是模拟的
function spin() {
time++; // 转动次数加1
sum++; //总转动次数加1
//判断time是否大于8
time = time > 8 ? 1 : time;
//先清空其他的带有active类的li
item.forEach(item => {
item.classList.remove('active')
})
clearTimeout(rollTime);
//给带有类名item_1的加上类名
document.querySelector(`.item_${time}`).classList.add('active')
rollTime = setTimeout(() => {
window.requestAnimationFrame(spin); // 进行递归动画 这段代码的作用是启动一个动画帧，以便在浏览器中渲染动画效果。动画帧是通过调用requestAnimationFrame()方法实现的，它允许你在动画帧中执行代码，而不是直接设置元素的样式。这样可以确保在渲染过程中不会出现跳帧的情况，从而实现毫秒级的渲染效果。
}, speed * sum)
if (sum === times) {
clearTimeout(rollTime); //清除定时器
//找出带有active类名的文字
const active = document.querySelector('.active').innerHTML
obj.text.innerHTML = `恭喜你抽中了${active}`
return
}
}
</script>
</body>
</html>总结
如果你跟我一样每天不知道吃啥，可以试试用这个轮盘来决定哦。
好好吃饭，好好学习，祝天天开心
