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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 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 include_path设置技巧分享
2011/07/03 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
三种php连接access数据库方法
2013/11/11 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
永不消失的title提示代码
2007/02/15 Javascript
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python实现图像识别功能
2018/01/29 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
详解Python time库的使用
2019/10/10 Python
python实现贪吃蛇双人大战
2020/04/18 Python
python如何爬取网页中的文字
2020/07/28 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
师范生实习的个人自我鉴定
2013/10/20 职场文书
求职信写作要突出重点
2014/01/01 职场文书
施工单位安全责任书
2014/07/24 职场文书
实训报告范文大全
2014/11/04 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
导游词之桂林
2019/08/20 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python