js实现抽奖的两种方法

更新时间：2020年03月19日 12:00:23 作者：浪子一秋

这篇文章主要为大家详细介绍了js实现抽奖的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
抽奖

swiper实现异形轮播效果
这篇文章主要为大家详细介绍了swiper实现异形轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
JS轮播图的实现方法2
这篇文章主要为大家详细介绍了JS轮播图的具体实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
js parseInt的陷阱分析小结
js parseInt的陷阱分析小结,当第一个字符为0时，Js会把它看成一个8进制数字，其他8进制之外的字符都回被忽略掉。
2011-03-03
JavaScript 完成注册页面表单校验的实例
下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
关于IE只能嵌套27层表格的说法证明
关于IE只能嵌套27层表格的说法证明...
2006-11-11
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
这篇文章主要介绍了JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例,使用javascript较为逼真的模拟出了国际象棋对弈的场景,需要的朋友可以参考下
2015-04-04
JS数字精度丢失的原因及解决方案
JS的数字类型一旦数字超过限值,JS将会丢失精度,导致前后端的值出现不一致,这篇文章主要给大家介绍了关于JS数字精度丢失的原因分析及解决方法,需要的朋友可以参考下
2022-04-04
JavaScript onclick事件使用方法详解
这篇文章主要介绍了JavaScript onclick事件使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
JS 获取页面尺寸的方法详解
通过 JS 获取页面相关的尺寸是比较常见的操作,尤其是在动态计算页面布局时,今天我们就来学习一下几个获取页面尺寸的基本方法,需要的朋友可以参考下
2023-09-09
ajax前台后台跨域请求处理方式
本篇文章通过前台跨域请求处理以及后台跨域的数据处理方式介绍，详细分析了ajax跨域的问题，对此有需要的朋友学习下。
2018-02-02

js实现抽奖的两种方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具