js实现随机抽奖

逑禄

2023-03-14

本文向大家介绍js实现随机抽奖，包括了js实现随机抽奖的使用技巧和注意事项，需要的朋友参考一下

前言

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

相关阅读

相关文章

相关问答

相关工具

相关文档