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 “跑马灯”抽奖活动代码解析与优化（一）
最近的项目中做了一个"跑马灯"的抽奖特效插件.上篇文章已经分享过html和css 的相关知识.这篇文章主要分享一些 JavaScript 相关的知识.这几天在写这篇文章的时候,也顺 ...
- JavaScript “跑马灯”抽奖活动代码解析与优化（二）
既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.J ...
- 原生js实现跑马灯抽奖效果
目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</ti ...
- javascript 跑马灯
1.看了写跑马灯的教程案例,隔了段时间自己写了一个简单的跑马灯.将过程中遇到的问题特此记录下来 代码如下: <!DOCTYPE html> <html> <head> ...
- js抽奖，跑马灯
分享自己写的跑马灯抽奖. HTML代码 <!--首先将一个div的背景设为一个圆形--> <div style=" width:240px; height:232px; b ...
- canvas九宫格跑马灯
canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖
- js抽奖跑马灯程序
js抽奖跑马灯程序 点击下载代码
- javascript小记五则：用JS写一个图片左右自由滚动的“跑马灯”效果
之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...
- JavaScript小实例-文字跑马灯效果
我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...
随机推荐
- A. Counting Kangaroos is Fun（贪心）
#include<stdio.h> #include<algorithm> using namespace std; ]; int main() { int i,n,high; ...
- Hibernate逍遥游记-第3章对象-关系映射基础-access="field"、dynamic-insert、dynamic-update、formula、update=false
1. package mypack; import java.util.*; public class Monkey{ private Long id; private String firstnam ...
- 删除元素 不存在 NO 存在 输出余下元素
#include<stdio.h> #include<stdlib.h> #define N 5 #define NULL 0 #define OK 1 #define ERR ...
- ADO.NET入门教程（三） 连接字符串，你小觑了吗？
出处:http://www.cnblogs.com/liuhaorain/archive/2012/02/12/2347914.html 摘要 ADO.NET强大的优势在于对不同的数据源提供一致的访问 ...
- java--面向接口编程
之前看的一本书的笔记,上周再看设计模式的时候,想到了这篇之前在看某本书时候的笔记. 面向接口编程很重要的一点就是接口回调,用接口声明的变量称作接口变量,属于引用型变量,可以存放实现该接口的类的实例的引 ...
- Xcode学习
http://www.cnblogs.com/ygm900/p/3488881.html
- 用代码编辑数据库T-SQL语句
1.创建表 create table Car( Code varchar(50) primary key, Name varchar(50), Time date, Price float, Bran ...
- python判断文件目录是否存在
import os os.path.isfile('test.txt') # 如果不存在就返回False os.path.exists(directory) # 如果目录不存在就返回False o ...
- Android开发之Android Context，上下文(Activity Context, Application Context)
转载:http://blog.csdn.net/lmj623565791/article/details/40481055 1.Context概念Context,相信不管是第一天开发Android,还 ...
- C#将HTML导出Excel
首先这个 不能用ajax 操作,不过 我现在讲的 这个方法和ajax 的效果一样. 你在你需要导出的页面写个方法 function DaoChu () { location.href = " ...