效果示例图
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.luckydraw {
border: 1px solid red;
width: 400px;
height: 400px;
position: relative;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
}
.luckydraw-item {
border: 1px solid red;
width: calc(100% / 3);
height: calc(100% / 3);
display: flex;
justify-content: center;
align-items: center;
user-select: none;
font-size: 16px;
}
.luckydraw-item:nth-of-type(5) {
cursor: pointer;
background-color: #f17070;
color: #ffffff;
}
.current-style {
background-color: #00a2ef;
color: #ffffff;
}
</style>
</head>
<body>
<div class="luckydraw">
<div class="luckydraw-item">奖品1</div>
<div class="luckydraw-item">奖品2</div>
<div class="luckydraw-item">奖品3</div>
<div class="luckydraw-item">奖品8</div>
<div class="luckydraw-item" id="luckydrawBtn">抽奖</div>
<div class="luckydraw-item">奖品4</div>
<div class="luckydraw-item">奖品7</div>
<div class="luckydraw-item">谢谢回顾</div>
<div class="luckydraw-item">奖品5</div>
</div>
</body>
<script type="text/javascript">
document.querySelector("#luckydrawBtn").addEventListener("click", () => {
const circle = getRandomNumber(1, 8); //随机获取1-8之间的数字，数字为多少，多少就中奖
console.log("[中奖]", circle)
luckydraw(circle); //设置为6：谢谢回顾
})
function luckydraw(index) {
let time = 100;
let initCircle = 0;
const circle = getRandomNumber(3, 6); //旋转多少圈
let timerHandle = null;
let count = 0;
timerHandle = setInterval(function() {
const luckydraw = [0, 1, 2, 5, 8, 7, 6, 3];
const active = document.querySelector(".current-style");
if (active) {
active.classList.remove("current-style")
}
document.querySelectorAll(".luckydraw-item")[luckydraw[count]].classList.add("current-style");
count++;
initCircle++;
if (count >= 8) {
count = 0;
}
if (initCircle >= circle * 8 + index) {
clearInterval(timerHandle)
}
}, time)
}
function getRandomNumber(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
</script>
</html>
