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 相关文章推荐
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
原生微信小程序开发中 redux 的使用详解
Feb 18 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
smarty中常用方法实例总结
2015/08/07 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP实现添加购物车功能
2017/03/06 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
Vuex 入门教程
2018/01/10 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
python实现猜数游戏
2020/03/27 Python
Python实现石头剪刀布游戏
2021/01/20 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
党员公开承诺书内容
2014/05/20 职场文书
小学生思想品德评语
2014/12/31 职场文书
教师考核鉴定意见
2015/06/05 职场文书
红色故事汇观后感
2015/06/18 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
SQL写法--行行比较
2021/08/23 SQL Server
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python