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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
javascript的函数作用域
Nov 12 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 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 ftp文件上传函数(基础版)
2010/06/03 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
ES6中的Promise代码详解
2017/10/09 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python列表list保留顺序去重的实例
2018/12/14 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python列表推导式入门学习解析
2019/12/02 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python内置异常类型全面汇总
2020/05/28 Python
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
教师绩效工资方案
2014/02/01 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
请病假条范文
2015/08/17 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python