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 相关文章推荐
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
关于js遍历表格的实例
Jul 10 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
全面了解js中的script标签
Jul 04 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
浅析Vue 中的 render 函数
Feb 28 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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与javascript的两种交互方式
2006/10/09 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
smarty简单应用实例
2015/11/03 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python中文编码问题小结
2014/09/28 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python实现移位加密和解密
2019/03/22 Python
python中return不返回值的问题解析
2020/07/22 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
师范学院毕业生求职信范文
2013/12/26 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
会计学专业自荐信
2014/06/25 职场文书
学校社会实践活动总结
2014/07/03 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
先进党支部申报材料
2014/12/24 职场文书
就业意向书范本
2015/05/11 职场文书
村官2015年度工作总结
2015/10/14 职场文书