玉溪哪有网站建设服务公司,优化大师官方网站,企业网站建设对企业的宣传作用,网站挂马处理百度快照顺序抽奖
前言
这段代码实现了一个简单的抽奖转盘效果。页面上有一个九宫格布局的抽奖区域#xff0c;周围八个格子分别放置了不同的奖品名称#xff0c;中间是一个 “开始抽奖” 的按钮。点击按钮后#xff0c;抽奖区域的格子会快速滚动#xff0c;颜色不断变化#xf…顺序抽奖
前言
这段代码实现了一个简单的抽奖转盘效果。页面上有一个九宫格布局的抽奖区域周围八个格子分别放置了不同的奖品名称中间是一个 “开始抽奖” 的按钮。点击按钮后抽奖区域的格子会快速滚动颜色不断变化模拟抽奖过程。经过一定圈数的滚动后会随机停止在某一个格子上弹出提示框显示中奖奖品。 效果展示 代码详情
HTML部分
div classboxdiv classdiv1电脑/divdiv classdiv2手机/divdiv classdiv3音响/divdiv classdiv4冰箱/divdiv classdiv5空调/divdiv classdiv6衣柜/divdiv classdiv7沙发/divdiv classdiv8地毯/divbutton classgiftButton开始抽奖/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 {//重新让k0下标 下一次循环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
htmlheadmeta charsetutf-8title抽奖页面/titlestyle/* 全局样式重置 */* {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/headbodydiv classboxdiv classdiv1电脑/divdiv classdiv2手机/divdiv classdiv3音响/divdiv classdiv4冰箱/divdiv classdiv5空调/divdiv classdiv6衣柜/divdiv classdiv7沙发/divdiv classdiv8地毯/divbutton classgiftButtonspan classmengban styledisplay: none; readonly/span开始抽奖/button/divdiv idbigAlert styledisplay: none;div classalertContentspan idalertMessage/spanbutton classbuttonAlert onclickcloseAlert()确定/button/div/divscript// 显示弹窗的function showAlert(a) {//先获取到大的divlet alertDiv document.getElementById(bigAlert);//在获取span标签let messageSpan document.getElementById(alertMessage);// 传参(中奖提示)// messageSpan.innerHTML span stylecolor: red;${a}/span;;//中奖提示模板字符串let startIndex a.indexOf(中奖的是) 中奖的是.length;let highlightedPart a.slice(startIndex);messageSpan.innerHTML span${a.slice(0, startIndex)}span stylecolor: 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 函数弹出提示框显示中奖信息
第二段代码
滚动规则奖品格子随机闪烁每次闪烁时随机选择一个奖品格子改变颜色不按照顺序进行滚动。速度控制滚动速度固定为每 200 毫秒闪烁一次没有动态调整速度的过程。中奖判断预先随机生成一个 11 - 20 之间的闪烁次数countTotal当闪烁次数达到这个随机值时抽奖停止弹出中奖提示框。提示方式自定义了一个模态框通过修改模态框的 display 属性来显示和隐藏并且对中奖信息中的奖品名称进行了样式处理红色加粗。
