顺序抽奖
前言
这段代码实现了一个简单的抽奖转盘效果。页面上有一个九宫格布局的抽奖区域，周围八个格子分别放置了不同的奖品名称，中间是一个 “开始抽奖” 的按钮。点击按钮后，抽奖区域的格子会快速滚动，颜色不断变化，模拟抽奖过程。经过一定圈数的滚动后，会随机停止在某一个格子上，弹出提示框显示中奖奖品。
效果展示
代码详情
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;
//该转下一圈的话，圈数+1
count++;
//上一圈的最后一个奖品变回原色
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 {
//清除定时器
//在设置一个定时器9
inter = 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) {
//先获取到大的div
let 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() {
//获取到大div
let alertDiv = document.getElementById('bigAlert');
//隐藏
alertDiv.style.display = 'none';
}
// 获取box
let 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() {
//每次被调用这个函数 闪动次数+1
bulingBuling++;
// 随机选择下一个要变色显示的奖品索引（不按照顺序）
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函数弹出提示框，显示中奖信息
第二段代码
- 滚动规则：奖品格子随机闪烁，每次闪烁时，随机选择一个奖品格子改变颜色，不按照顺序进行滚动。
- 速度控制：滚动速度固定为每 200 毫秒闪烁一次，没有动态调整速度的过程。
- 中奖判断：预先随机生成一个 11 - 20 之间的闪烁次数（
countTotal），当闪烁次数达到这个随机值时，抽奖停止，弹出中奖提示框。 - 提示方式：自定义了一个模态框，通过修改模态框的
display属性来显示和隐藏，并且对中奖信息中的奖品名称进行了样式处理（红色加粗）。
