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 模式实例 观察者模式
Oct 24 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
header导出Excel应用示例
2014/01/24 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python探索之ModelForm代码详解
2017/10/26 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Django中的forms组件实例详解
2018/11/08 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
小学家长会邀请函
2014/01/23 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书