华山资源网

js实现随机抽奖
网络编程 2024/11/15 佚名
3 1

前言

在前端的开发当中，我们肯定会遇到随机抽奖的需求。我们要怎么去实现呢？下面就来分享随机抽奖的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经典小游戏汇总

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com