用 HTML、CSS 和 JavaScript 实现抽奖转盘效果

顺序抽奖

前言

这段代码实现了一个简单的抽奖转盘效果。页面上有一个九宫格布局的抽奖区域，周围八个格子分别放置了不同的奖品名称，中间是一个 “开始抽奖” 的按钮。点击按钮后，抽奖区域的格子会快速滚动，颜色不断变化，模拟抽奖过程。经过一定圈数的滚动后，会随机停止在某一个格子上，弹出提示框显示中奖奖品。

效果展示

代码详情

HTML部分

<div class="box"><div class="div1">电脑</div><div class="div2">手机</div><div class="div3">音响</div><div class="div4">冰箱</div><div class="div5">空调</div><div class="div6">衣柜</div><div class="div7">沙发</div><div class="div8">地毯</div><button class="giftButton">开始抽奖</button>
</div>

CSS部分

* {margin: 0;padding: 0;
}.box {background-color: lightgray;width: 340px;height: 340px;position: relative;
}.box div {background-color: cadetblue;width: 100px;height: 100px;text-align: center;line-height: 100px;
}.div1 {position: absolute;top: 10px;left: 10px;
}/* 其他 .divX 类的样式省略，它们类似地设置了不同的 top 和 left 值来定位 */.giftButton {position: absolute;width: 100px;height: 100px;top: 120px;left: 120px;border-radius: 10px;background-color: navajowhite;
}

JS部分

初始化声明

boxCenter：通过 document.getElementsByClassName('box')[0] 获取到类名为 box 的元素，这个元素是整个抽奖区域的容器。
allGift：使用 boxCenter.getElementsByTagName('div') 获取 boxCenter 内的所有 div 元素，这些 div 元素代表了各个奖品格子。
giftButtons：通过 document.getElementsByClassName('giftButton')[0] 获取 “开始抽奖” 按钮元素，后续会为它添加点击事件。
k：作为奖品的下标，用于标记当前高亮显示的奖品格子。
time：旋转时间间隔，初始值为 500 毫秒，后续会根据抽奖过程动态调整。
count：记录抽奖过程中转过的圈数，初始值为 0。
inter：用于存储定时器，方便后续清除和重新设置定时器。
random：存储随机生成的中奖下标，初始值为 0。

//获取box
let boxCenter = document.getElementsByClassName('box')[0];
//获取boxcenter里的所有的div元素
let allGift = boxCenter.getElementsByTagName('div');
//获取到抽奖按钮,后续帮点击事件
let giftButtons = document.getElementsByClassName('giftButton')[0];
//充当奖品的下标
let k = 0;
// 旋转时间间隔
let time = 500;
//圈数，就是转动的圈数
let count = 0;
//存定时器的
let inter;
//随机的数（中奖的下标）
let random = 0;

点击按钮事件

为 giftButtons 按钮添加 onclick 事件处理函数。
当点击按钮时，将当前 k 对应的奖品格子背景颜色设置为黄色，表示高亮显示。
使用 Math.random() 生成一个 0 到 1 之间的随机数，乘以 allGift.length 得到一个随机范围在 0 到奖品数量之间的数，再使用 Math.floor() 向下取整，得到一个随机的中奖下标 random。
使用 setInterval() 函数设置一个定时器，每隔 time 毫秒执行一次 autoScroll 函数，开始抽奖滚动过程。

//上点击事件
giftButtons.onclick = function() {//奖品的下标k变颜色 allGift[k].style.backgroundColor = 'yellow';// 先生成一个随机数，然后*box里的所有div的数量,再向下取整random = Math.floor(Math.random() * allGift.length);//设定时器inter = setInterval(autoScroll, time);
}

滚动函数

奖品格子切换：
- 如果 k 小于 allGift.length - 1，说明还没有转到最后一个奖品格子，将 k 加 1，把上一个奖品格子的背景颜色变回 cadetblue，当前 k 对应的格子背景颜色设置为黄色。
- 如果 k 等于或大于 allGift.length - 1，说明转到了最后一个奖品格子，将 k 重置为 0，代表开始下一圈，同时圈数 count 加 1，把上一圈最后一个奖品格子的背景颜色变回 cadetblue，当前 k 对应的格子背景颜色设置为黄色。
滚动速度调整：
- 当圈数 count 小于 3 时，每次将 time 减去 100 毫秒，让滚动速度变快，但最快不超过 100 毫秒。
- 当圈数 count 大于等于 3 时，每次将 time 加上 100 毫秒，让滚动速度变慢，但最慢不超过 300 毫秒。
中奖判断与处理：
- 先使用 clearInterval(inter) 清除当前的定时器。
- 如果随机生成的中奖下标 random 等于当前的 k 且圈数 count 大于 4，说明抽奖停止，弹出提示框显示中奖的奖品名称。
- 否则，重新设置定时器，继续滚动，直到满足中奖条件。

function autoScroll() {//k小于长度 代表转到最后一个元素了   if (k < allGift.length - 1) {k++;//上一个奖品变回原色allGift[k - 1].style.backgroundColor = 'cadetblue';//当前索引下标变红allGift[k].style.backgroundColor = 'yellow';//k比长度长的话代表该转第二圈了} else {//重新让k=0下标， 下一次循环k = 0;//该转下一圈的话，圈数+1count++;//上一圈的最后一个奖品变回原色allGift[allGift.length - 1].style.backgroundColor = 'cadetblue';//当前索引下标变红allGift[k].style.backgroundColor = 'yellow';}if (count < 3) {//圈数小于5 ，每次都-100 让他变快变快time -= 100;//限制条件：最快滚动就是0.2秒if (time < 100) {time = 100;}//最外面的否则。就是圈数大于} else {//让他变慢time += 100;//限制条件：最慢就是2秒滚动一次if (time > 300) {time = 300;}}//判断中奖的是啥 和 确认转的圈数clearInterval(inter);if (random == k && count > 4) {//提示用户alert('🎉恭喜你,中奖的是🎉:' + '👉👉' + allGift[k].innerHTML + '👈👈');} else {//清除定时器//在设置一个定时器9inter = setInterval(autoScroll, time);}
}

随机抽奖

随机抽奖即为滚动的格子为随机的。

代码总览

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>抽奖页面</title><style>/* 全局样式重置 */* {margin: 0;padding: 0;}/* 抽奖容器样式 */.box {background-color: lightgray;width: 340px;height: 340px;position: relative;}/* 奖品方块样式 */.box div {background-color: cadetblue;width: 100px;height: 100px;text-align: center;line-height: 100px;}/* 各个奖品方块定位样式 */.div1 {position: absolute;top: 10px;left: 10px;}.div2 {position: absolute;top: 10px;left: 120px;}.div3 {position: absolute;top: 10px;left: 230px;}.div4 {position: absolute;top: 120px;left: 230px;}.div5 {position: absolute;top: 230px;left: 230px;}.div6 {position: absolute;top: 230px;left: 120px;}.div7 {position: absolute;top: 230px;left: 10px;}.div8 {position: absolute;top: 120px;left: 10px;}/* 抽奖按钮样式 */.giftButton {position: absolute;width: 100px;height: 100px;top: 120px;left: 120px;border-radius: 10px;background-color: navajowhite;}#bigAlert {display: flex;position: fixed;/* z-index: 1; *//* left: 0; */top: 0;width: 100%;height: 100%;/* overflow: auto; */background-color: rgba(0, 0, 0, 0.4);align-content: center;}.alertContent {display: flex;justify-content: space-around;align-items: center;background-color: white;border-radius: 10px;/* margin: 15%; *//* padding: 20px; *//* border: 1px solid #888; */width: 300px;height: 100px;/* margin-left: auto;margin-right: auto; */margin: auto;}.buttonAlert {padding: 10px;color: black;background-color: gold;border: none;border-radius: 10px;cursor: pointer;}.buttonAlert:hover {background-color: #609EA0;color: blue;transition: 0.3s ease;}.mengban {background-color: rgba(0, 0, 0, 0.5);width: 100%;height: 100%;/* z-index: 2; */position: absolute;top: 0px;left: 0px;border-radius: 8px;}</style></head><body><div class="box"><div class="div1">电脑</div><div class="div2">手机</div><div class="div3">音响</div><div class="div4">冰箱</div><div class="div5">空调</div><div class="div6">衣柜</div><div class="div7">沙发</div><div class="div8">地毯</div><button class="giftButton"><span class="mengban" style="display: none;" readonly></span>开始抽奖</button></div><div id="bigAlert" style="display: none;"><div class="alertContent"><span id="alertMessage"></span><button class="buttonAlert" onclick="closeAlert()">确定</button></div></div><script>// 显示弹窗的function showAlert(a) {//先获取到大的divlet alertDiv = document.getElementById('bigAlert');//在获取span标签let messageSpan = document.getElementById('alertMessage');// 传参(中奖提示)// messageSpan.innerHTML = `<span style="color: red;">${a}</span>`;;//中奖提示（模板字符串）let startIndex = a.indexOf("中奖的是") + "中奖的是".length;let highlightedPart = a.slice(startIndex);messageSpan.innerHTML = `<span>${a.slice(0, startIndex)}<span style="color: red; font-weight: bold;">${highlightedPart}</span></span>`;//上面隐藏了 现在在显示出来alertDiv.style.display = 'block';}showAlert('aaaaaaaaaaaa');//关闭弹窗的function closeAlert() {//获取到大divlet alertDiv = document.getElementById('bigAlert');//隐藏alertDiv.style.display = 'none';}// 获取boxlet boxCenter = document.getElementsByClassName('box')[0];// 获取boxcenter里的所有的div元素let allGift = boxCenter.getElementsByTagName('div');// 获取到抽奖按钮，后续绑定点击事件let giftButtons = document.getElementsByClassName('giftButton')[0];// 充当所有的奖品的下标let giftIndex = 0;// 旋转时间间隔let time = 200;// 存定时器的let inter;// 本次抽奖的随机圈数let countTotal;let mengban = document.getElementsByClassName('mengban')[0];//闪动次数let bulingBuling = 0;// 点击事件giftButtons.onclick = function() {bulingBuling = 0;// 在数100-200格之间 。随机生成格数countTotal = Math.floor(Math.random() * 10 + 1) + 10;// 设定时器inter = setInterval(autoScroll, time);//蒙版显示。标签上隐藏了mengban.style.display = 'block';//清除点击事件 ，为了抽奖的时候不能再点抽奖按钮giftButtons.onclick = null;}//这个函数会在定时器内被反复调用function autoScroll() {//每次被调用这个函数 闪动次数+1bulingBuling++;// 随机选择下一个要变色显示的奖品索引（不按照顺序）let nextIndex;nextIndex = Math.floor(Math.random() * allGift.length);// 循环数组中的每一个元素 让他们颜色统一for (let i = 0; i < allGift.length; i++) {allGift[i].style.backgroundColor = 'cadetblue';}// 把 全部div 中挑出来的随机索引下标变黄allGift[nextIndex].style.backgroundColor = 'yellow';// 判断闪的格，是否等于上面要求的格数if (bulingBuling == countTotal) {mengban.style.display = 'none';//满足就清除定时器clearInterval(inter);// 提示用户showAlert('🎉恭喜你,中奖的是🎉:' + ' ' + allGift[nextIndex].innerHTML);//========================重新绑定点击事件============================================giftButtons.onclick = function() {bulingBuling = 0;// 在数100-200格之间 。随机生成格数countTotal = Math.floor(Math.random() * 10 + 1) + 10;// 设定时器inter = setInterval(autoScroll, time);mengban.style.display = 'block';giftButtons.onclick = null;}}}</script></body></html>

功能实现差异

第一段代码

滚动规则：奖品格子按照顺序依次滚动，从第一个格子开始，逐个向后滚动，当到达最后一个格子后，重新从第一个格子开始滚动，形成循环滚动的效果。
速度控制：在抽奖开始的前几圈（圈数小于 3），滚动速度逐渐加快，最快达到每 100 毫秒滚动一次；之后滚动速度逐渐变慢，最慢为每 300 毫秒滚动一次。
中奖判断：当随机生成的中奖下标与当前滚动到的格子下标相等，并且已经滚动超过 4 圈时，抽奖停止，弹出中奖提示框。
提示方式：使用浏览器默认的 alert 函数弹出提示框，显示中奖信息