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 相关文章推荐
js constructor的实际作用分析
Nov 15 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
Jquery 效果使用详解
Nov 23 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
微信小程序实现图片上传
May 23 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 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实现验证码功能
2006/10/09 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
Maps Javascript
2007/01/22 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
document.getElementById介绍
2011/09/13 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python交互式图形编程的实现
2019/07/25 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python线程指南分享
2019/11/19 Python
python db类用法说明
2020/07/07 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
个人委托书怎么写
2014/04/04 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
python实现网络五子棋
2021/04/11 Python
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
Python软件包安装的三种常见方法
2022/07/07 Python
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS