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 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
javascript用函数实现对象的方法
May 14 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
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
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
php中yii框架实例用法
2020/12/22 PHP
JS 建立对象的方法
2007/04/21 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
Node.js事件驱动
2015/06/18 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
angular4自定义组件详解
2017/09/28 Javascript
vue组件的写法汇总
2018/04/12 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python实现给字典添加条目的方法
2014/09/25 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
答题辅助python代码实现
2018/01/16 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
Python自省及反射原理实例详解
2020/07/06 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
股东协议书范本
2014/04/14 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
校园广播稿范文
2015/08/19 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书