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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
浅谈js中的this问题
Aug 31 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
微信小程序实现左右列表联动
May 19 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
React服务端渲染原理解析与实践
Mar 04 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接收POST数据方式
2015/06/05 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python批量转换文件编码格式
2015/05/17 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python异常处理操作实例详解
2018/08/28 Python
python遍历小写英文字母的方法
2019/01/02 Python
python文件写入write()的操作
2019/05/14 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
某公司.Net方向面试题
2014/04/24 面试题
黄金搭档广告词
2014/03/21 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js