极乐门资源网 Design By www.ioogu.com
前言
在前端的开发当中,我们肯定会遇到随机抽奖的需求。我们要怎么去实现呢?下面就来分享随机抽奖的JS代码,有需要的小伙伴可以复制到编译器当中运行查看效果。
随机抽奖的JS代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap { text-align: center; width: 500px; margin: 100px auto; position: relative; } #ul1 { width: 303px; height: 303px; margin: 50px auto; padding: 0; border-top: 1px solid black; border-left: 1px solid black; } #ul1 li { float: left; border-right: 1px solid black; border-bottom: 1px solid black; list-style: none; width: 100px; height: 100px; line-height: 100px; text-align: center; } #tooltips { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; z-index: 999; display: none; } #info .btn button { background-color: #009f95; color: white; outline: none; font-size: 10px; width: 60px; height: 30px; margin-left: 300px; } #info .content { height: 120px; padding: 20px; box-sizing: border-box; } </style> </head> <body> <div id="wrap"> <button id="btn">开始抽奖</button> <ul id="ul1"> <li>鼠标</li> <li>1000万</li> <li>100优惠券</li> <li>很遗憾</li> <li>键盘</li> <li>iPhoneX</li> <li>很遗憾</li> <li>迪拜10日游</li> <li>很遗憾</li> </ul> </div> <!--提示信息--> <div id="tooltips"> <div id="info"> <div class="title">信息</div> <div class="content" id="content">恭喜你,中奖啦!!!</div> <div class="btn"> <button id="confirm">确定</button> </div> </div> </div> <script type="text/javascript"> // 思路:1.实现红色背景切换 2当运动停止,弹出对话框-- 用js去修改tooltips的display属性 变为block var oStart = document.getElementById("btn") // li标签 var aLi = document.getElementsByTagName("li") // 提示框 var oTooltips = document.getElementById("tooltips") // 提示框的确定按钮 var oConfirm = document.getElementById("confirm") // 提示框的提示内容 var oContent = document.getElementById("content") // 定时器id var timmer = null // 设置oTooltips的高度和html文档高度一样,这样把所有的内容都遮住 oTooltips.style.height = document.documentElement.offsetHeight + "px" oStart.onclick = function() { // 清空计时器 clearInterval(timmer) // 定义一个下标 var nowIndex = 0 // 生成一个随机数,跑到第四圈的时候产生一个随机中奖数字 var randomInt = getRandomInt(26, 35) // 下面代码只是为了给用户感觉:正在抽奖 timmer = setInterval(function() { changeColor(aLi, nowIndex % aLi.length) // 下标自动+1 nowIndex++ console.log("切换的下标", nowIndex, "随机数", randomInt) // randomInt表示中奖的数字 ,如果nowIndex和randomInt一样,我们就认为当前的li是抽中的奖品 if(nowIndex === randomInt) { clearInterval(timmer) // 停止以后,还应该往后切换一次 changeColor(aLi, nowIndex % aLi.length) // 在停止的时候,获取到当前抽中的li的内容 if(aLi[randomInt % aLi.length].innerHTML === "很遗憾") { oContent.innerHTML = "很遗憾没有中奖" } else { oContent.innerHTML = "恭喜你,你抽中了" + aLi[randomInt % aLi.length].innerHTML } oTooltips.style.display = "block" } }, 100) // 什么时候停止?当中奖的时候停止,抽中了谁? // 可以用随机数生成一个具体的数字 randomInt // 完善功能:提示用户抽中了什么 2让背景切换多跑几圈 } // 当点击提示框确定按钮的时候,提示框消失 oConfirm.onclick = function() { oTooltips.style.display = "none" } // 封装切换一个切换背景的方法 function changeColor(aLi, nowIndex) { for(var i = 0; i < aLi.length; i++) { // 清除上一个红色背景,全部设置成白色 aLi[i].style.backgroundColor = "white" } // 当前下标背景设置成红色 aLi[nowIndex].style.backgroundColor = "red" } // 获取随机数的方法 function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } </script> </body> </html>
小编还为大家准备了精彩的专题:javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,抽奖
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无js实现随机抽奖的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]