javascript跑马灯抽奖实例讲解


Posted in Javascript onApril 17, 2020

本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖游戏</title>
<style>
#box{
 width:720px;
 margin:0 auto;
 margin-top:20px;
 box-shadow:0px 0px 2px #333;
}
.pic{
 width:200px;
 height:200px;
 float:left;
 line-height:200px;
 margin:10px;
 border:5px #fff solid;
 color:blue;
 font-size: 35px;
 text-align: center;
}
.anniu{
 width:200px;
 height:200px;
 float:left;
 margin:10px;
}
#drawBtn{
 color:red;
 font-size:30px;
 width:200px;
 height:200px;
 box-shadow:0px 0px 2px #333;
 font-weight: bold;
}
 </style>
 <script>
 window.onload=init;
 var setting={
 count:0,
 total:24,
 delay:20,
 picIndex:[0,1,2,4,7,6,5,3]
 }
 function init(){
 document.getElementById("drawBtn").onclick=function(){
  setting.count=0;
  setting.delay=20;
  this.disable=true;//禁用按钮
  var drawBtn=this;
  //获取所有图片的div
  var allDivs=document.getElementsByClassName("pic");
  //获得一个随机整数,代表中奖的那个位置,3*8+(0-7)
  setting.total+=Math.floor(Math.random()*allDivs.length);
  //设置定时器,依次修改每个div边框的颜色.
  setTimeout(function show(){
  //重置上一个边框的颜色
  for (var i=0;i<allDivs.length;i++){
   allDivs[i].style.borderColor="#fff";
   allDivs[i].style.opacity=0.7;
  }
  //找到要修改的那个边框的颜色设置
   var currentPic=allDivs[setting.picIndex[setting.count%8]];
   currentPic.style.borderColor="red";
   currentPic.style.opacity=1.0;
  setting.count++;
  setting.delay+=2*setting.count;
   if(setting.count>setting.total){
   alert("您中奖了,哈哈");
   drawBtn.disable=false;
   return;
   }
   setTimeout(show,setting.delay);
  },setting.delay);
 }
 }
 </script>
</head>
<body>
<div id="box">
 <div class="pic">1</div>
 <div class="pic">2</div>
 <div class="pic">3</div>
 <div class="pic">4</div>
 <div class="anniu"><input type="button" value="我要抽奖" id="drawBtn"/></div>
 <div class="pic">5</div>
 <div class="pic">6</div>
 <div class="pic">7</div>
 <div class="pic">8</div>
</div>
</body>
</html>

想要学习更多关于抽奖功能的实现,请参考此专题:抽奖功能

以上就是本文的详细内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 #Javascript
javascript返回顶部的按钮实现方法
Jan 09 #Javascript
javascript类型系统 Array对象学习笔记
Jan 09 #Javascript
JS中生成随机数的用法及相关函数
Jan 09 #Javascript
JavaScript电子时钟倒计时
Jan 09 #Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 #Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 #Javascript
You might like
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python 连接sqlite及简单操作
2017/06/30 Python
详解Python装饰器
2019/03/25 Python
python实现根据文件格式分类
2019/10/31 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
方正Java笔试题
2014/07/03 面试题
2014两会学习心得:时代的发展
2014/03/17 职场文书
倡议书格式
2014/04/14 职场文书
军训拉歌口号
2014/06/13 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python