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实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
react路由配置方式详解
Aug 07 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
js实现右键弹出自定义菜单
Sep 08 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 mssql 时间格式问题
2009/01/13 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python版名片管理系统
2018/11/30 Python
python 三元运算符使用解析
2019/09/16 Python
python实现数字炸弹游戏程序
2020/07/17 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
招商业务员岗位职责
2013/12/16 职场文书
小学教师办公室制度
2014/02/03 职场文书
商务日语专业自荐信
2014/04/17 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2014年转正工作总结
2014/11/08 职场文书
开平碉楼导游词
2015/02/06 职场文书