js实现抽奖的两种方法


Posted in Javascript onMarch 19, 2020

本文实例为大家分享了js实现抽奖的具体代码,供大家参考,具体内容如下

抽奖活动的原理还是很简单的,通过代码一目了然,如果看不懂就私聊我,可以私下交流!

方法一:使用table写一个随机抽奖

这是html+js代码

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="css/test2.css" >
 <title>抽奖</title>
</head>
 
<body>
 <div class="content">
  <div class="top">
   抽奖活动
  </div>
  <div class="body">
   <table>
    <tr>
     <th>百度</th>
     <th>腾讯</th>
     <th>阿里</th>
     <th>京东</th>
     <th>华为</th>
    </tr>
    <tr>
     <th>滴滴</th>
     <th>蚂蚁金服</th>
     <th>乐视</th>
     <th>中国电网</th>
     <th>中石化</th>
    </tr>
    <tr>
     <th>美团</th>
     <th>乐视</th>
     <th>小米</th>
     <th>网易</th>
     <th>酷我</th>
    </tr>
    <tr>
     <th>爱奇艺</th>
     <th>盛大</th>
     <th>短文学</th>
     <th>浅墨诗韵</th>
     <th>浪子一秋</th>
    </tr>
   </table>
  </div>
  <div class="bottom">
   <input type="button" name="" id="button" class="button" value="开始" onclick="toStart(this)">
  </div>
 </div>
</body>
<script type="text/javascript">
 var timer;
 var button = document.querySelector("#button");
 function toStart() {
  // 启动定时器
  if (timer == undefined) {
   timer = setInterval(changeStyle, 100);
   button.setAttribute("value", "停止");
  } else {
   clearInterval(timer);
   timer = undefined;
   button.setAttribute("value", "开始");
  }
 }
 // 改变样式
 var a, b;
 function changeStyle() {
  var tb = document.querySelector("table");
  console.log(a);
  if (a != undefined) {
   tb.rows[a].cells[b].style.backgroundColor = "white";
  }
  // 
  // 获取要操作的元素
  a = parseInt(Math.random() * 4);
  b = parseInt(Math.random() * 5);
  // console.log(a);
  var col = tb.rows[a].cells[b];
  col.style.backgroundColor = "red";
 }
 
 
</script>
 
</html>

方法二:使用span标签写

html+js代码如下

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="css/test2.css" >
 <title>抽奖</title>
</head>
 
<body>
 <div class="content">
  <div class="top">
   抽奖活动
  </div>
  <div class="body" id="body">
 
  </div>
  <div class="bottom">
   <input type="button" name="" id="button" class="button" value="开始" onclick="toStart()">
  </div>
 </div>
</body>
<script type="text/javascript">
 // 获取要操作的元素
 var div = document.getElementById("body");
 // 动态添加span
 for (var i = 0; i < 25; i++) {
  // 创建一个新的标签
  var el = document.createElement("span");
  // 给标签设置内容
  el.innerText = i;
  // 添加子元素
  div.appendChild(el);
 }
 
 var timer;
 var button = document.querySelector("#button");
 function toStart() {
  // 启动定时器
  if (timer == undefined) {
   timer = setInterval(changeStyle, 100);
   button.setAttribute("value", "停止");
  } else {
   clearInterval(timer);
   timer = undefined;
   button.setAttribute("value", "开始");
  }
 }
 // 改变样式
 var selection;
 function changeStyle() {
  var spans = document.getElementsByTagName("span");
  if (selection != undefined) {
   console.log(selection);
   spans[selection].style.backgroundColor = "white";
  }
  selection = parseInt(Math.random() * 25);
  var spans = document.getElementsByTagName("span");
  var selectSpan = spans[selection];
  selectSpan.style.backgroundColor = "red";
 }
 
</script>
 
</html>

两个页面的css代码

*{
 margin: 0;
 padding: 0;
}
body{
 display: block;
}
.content{
 width: 500px;
 margin: auto;
}
.top{
 text-align: center;
 height: 50px;
 color: red;
 font-size: 30px;
 
}
table{
 width: 100%;
 border: 1px solid red;
 border-spacing: 0;
}
th{
 border: 1px dashed rgb(189, 189, 86);
 height: 40px;
}
.bottom{
 height: 50px;
 margin-top: 20px;
 text-align: center;
}
.button{
 background-color: #4CAF50; /* Green */
 border: none;
 color: white;
 padding: 15px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
}
 
 
/* test2-1 */
.body{
 width: 512px;
 height: 260px;
 border: 1px solid red;
}
span{
 display: inline-block;
 width: 100px;
 height: 50px;
 border: 1px dashed #b1da1f;
 line-height: 50px;
 text-align: center;
}

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

Javascript 相关文章推荐
Javascript模块模式分析
May 16 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
input框中的name和id的区别
Nov 16 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
vue实现简单跑马灯效果
May 25 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
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 #Javascript
You might like
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
组合算法的PHP解答方法
2012/02/04 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
php 修改密码实现代码
2017/05/24 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
python如何建立全零数组
2020/07/19 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Born鞋子官网:Born Shoes
2017/04/06 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python