重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

js怎么实现随机抽奖

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

创新互联建站长期为上1000+客户提供的网站建设服务,团队从业经验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怎么实现随机抽奖”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


    文章标题:js怎么实现随机抽奖
    地址分享:http://cqcxhl.com/article/igcghs.html