js怎么实现随机抽奖-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

js怎么实现随机抽奖-创新互联

这篇文章主要介绍js怎么实现随机抽奖，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为尖草坪企业提供专业的网站制作、成都网站设计，尖草坪网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

前言

在前端的开发当中，我们肯定会遇到随机抽奖的需求。我们要怎么去实现呢？下面就来分享随机抽奖的JS代码，有需要的小伙伴可以复制到编译器当中运行查看效果。

随机抽奖的JS代码




 
 
 
 
 #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;
 }
 
 

 
 
 开始抽奖
 
 鼠标
 1000万
 100优惠券
 很遗憾
 键盘
 iPhoneX
 很遗憾
 迪拜10日游
 很遗憾

信息

恭喜你，中奖啦！！！

确定

// 思路：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) }

以上是“js怎么实现随机抽奖”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：js怎么实现随机抽奖-创新互联
分享链接：http://lswzjz.com/article/cecspo.html

新闻中心

其他资讯