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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Django中使用Celery的方法示例
2018/11/29 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
业务经理的岗位职责
2013/11/16 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
医院总经理职责
2013/12/26 职场文书
安全生产检查通报
2014/01/29 职场文书
房地产广告词大全
2014/03/19 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书