js实现随机抽奖


Posted in Javascript onMarch 19, 2020

前言

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
使用p5.js临摹动态图形
Oct 23 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
js实现抽奖的两种方法
Mar 19 #Javascript
js实现九宫格抽奖
Mar 19 #Javascript
在Vue.js中使用TypeScript的方法
Mar 19 #Javascript
JS实现长图上下滚动效果
Mar 19 #Javascript
JavaScript实现简单计算器
Mar 19 #Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
webpack 动态批量加载文件的实现方法
Mar 19 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
python logging重复记录日志问题的解决方法
2018/07/12 Python
python3字符串操作总结
2019/07/24 Python
Python如何实现强制数据类型转换
2019/11/22 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python用Jira库来操作Jira
2020/12/28 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
文秘应聘自荐书范文
2014/02/18 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
民生工作实施方案
2014/05/31 职场文书
工作所在部门证明
2014/09/21 职场文书
作文批改评语
2014/12/25 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
大学生暑假实习总结
2015/07/13 职场文书
银行求职信范文
2019/05/13 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书