好资源导航 » 文章资讯 » js实现随机抽奖

js实现随机抽奖

2023-07-28 10:22:13 76

前言

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

随机抽奖的JS代码








#wrap{
text-align:center;
width:500px;
margin:100pxauto;
position:relative;
}

#ul1{
width:303px;
height:303px;
margin:50pxauto;
padding:0;
border-top:1pxsolidblack;
border-left:1pxsolidblack;
}

#ul1li{
float:left;
border-right:1pxsolidblack;
border-bottom:1pxsolidblack;
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.btnbutton{
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 varoStart=document.getElementById("btn") //li标签 varaLi=document.getElementsByTagName("li") //提示框 varoTooltips=document.getElementById("tooltips") //提示框的确定按钮 varoConfirm=document.getElementById("confirm") //提示框的提示内容 varoContent=document.getElementById("content") //定时器id vartimmer=null //设置oTooltips的高度和html文档高度一样，这样把所有的内容都遮住 oTooltips.style.height=document.documentElement.offsetHeight+"px" oStart.onclick=function(){ //清空计时器 clearInterval(timmer) //定义一个下标 varnowIndex=0 //生成一个随机数,跑到第四圈的时候产生一个随机中奖数字 varrandomInt=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" } //封装切换一个切换背景的方法 functionchangeColor(aLi,nowIndex){ for(vari=0;i

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com