jquery转盘抽奖的研究
先看效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>转盘抽奖二</title>
<style>
*{margin:0;padding: 0;}
#lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}
#lottery table{background-color:yellow;}
#lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}
#lottery table td img{display:block;width:190px;height:170px;}
#lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url('./img/lottery1.jpg') no-repeat top center;}
#lottery table td a:hover{background-image:url('./img/lottery2.jpg');}
#lottery table td.active .mask{display:block;}
.mask{width:100%;height:100%;position:absolute;left:0;top:0;background-color: rgba(252,211,4,0.5); display:none; }
</style>
</head>
<body>
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="lottery-unit lottery-unit-0"><img src="./img/gift0.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-1"><img src="./img/gift1.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-2"><img src="./img/gift2.jpg"><div class="mask"></div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-7"><img src="./img/gift7.jpg"><div class="mask"></div></td>
<td><a href="#"></a></td>
<td class="lottery-unit lottery-unit-3"><img src="./img/gift3.jpg"><div class="mask"></div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-6"><img src="./img/gift6.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-5"><img src="./img/gift5.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-4"><img src="./img/gift4.jpg"><div class="mask"></div></td>
</tr>
</table>
</div>
<script src="../js/jquery.1.10.0.js"></script>
<script>
$(function () {
var lottery = {
index: -1, //当前转动到哪个位置，起点位置
count: 0, //总共有多少个位置
timer: 0, //setTimeout的ID，用clearTimeout清除
speed: 20, //初始转动速度
times: 0, //转动次数
cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, //中奖位置
init: function (id) { //对象的入口方法
//节点检测
if ($("#" + id).find(".lottery-unit").length > 0) {
$lottery = $("#" + id); //抽奖转盘节点ID
$units = $lottery.find(".lottery-unit"); //奖品节点
this.obj = $lottery; //把抽奖转盘节点对象赋值给lottery对象的obj属性
this.count = $units.length; //把奖品节点的长度赋值给lottery的count属性
$lottery.find(".lottery-unit-" + this.index).addClass("active"); //给转盘当前位置添加当前状态
};
},
roll: function () { //转盘转动的方法
var index = this.index; //当前转动到的位置
var count = this.count; //位置总数
var lottery = this.obj; //抽奖转盘的节点
$(lottery).find(".lottery-unit-" + index).removeClass("active"); //每次转动前，先把当前的选择状态删除
index += 1; //将转动到的位置增加1
if (index > count - 1) { //判断如果当前转动到的位置大于奖品节点总长度-1，则让当前转动到的位置重置为0;
index = 0;
};
$(lottery).find(".lottery-unit-" + index).addClass("active"); //然后给当前转动到的位置添加当前状态
this.index = index; //把当前转动到的位置赋值给lottery对象的index属性
return false; //返回false,终止程序
},
stop: function (index) { //停止转动，返回中奖位置
this.prize = index;
return false; //返回false,终止程序
}
}; //定义一个转动的方法roll()
function roll() {
lottery.times += 1; //调用lottery对象的times属性并且在每次调用时加1
lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
//判断，如果转动次数大于转动基本次数加10（转动多少次后进入抽奖）并且中奖位置等于当前转动的位置的时候
if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
clearTimeout(lottery.timer); //清除转动的定时器
lottery.prize = -1; //重置prize属性为-1
lottery.times = 0; //重置转动次数times为0
click = false; //重置变量click为false;ps:click变量用来在点击抽奖后不能在点击抽奖按钮，防止造成定时器叠加
} else {
//否则，即转动次数times<=转动基本次数时并且中奖位置和当前转动位置不相等的时候 //判断如果转动次数小于转动基本数的时候
if (lottery.times < lottery.cycle) {
//让转动速度减少10并重新赋值给属性speed
lottery.speed -= 10; //否则如果，转动次数等于转动基本数的时候
} else if (lottery.times == lottery.cycle) { //转动基本数等于转动次数后产生抽奖结果
//通过一个随机数生成，把随机数赋值给新声明的变量index
var index = Math.random() * (lottery.count) | 0; //中奖物品通过一个随机数生成
lottery.prize = index; //把中间物品赋值给lottery对象的prize属性
} else {
//否则即转动次数大于转动基本数的时候 if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
lottery.speed += 110;
} else {
lottery.speed += 20;
}
}
if (lottery.speed < 40) {
lottery.speed = 40;
}; lottery.timer = setTimeout(roll, lottery.speed);//循环调用
};
return false;
};
//方法调用
var click = false;
lottery.init('lottery');
$("#lottery a").click(function () {
if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
return false;
} else {
lottery.speed = 100;
roll(); //转圈过程不响应click事件，会将click置为false
click = true; //一次抽奖完成后，设置click为true，可继续抽奖
return false;
};
});
});
</script>
</body>
</html>
jquery转盘抽奖的研究的更多相关文章
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
- 用jQuery和PHP来实现转盘抽奖程序
准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...
- jquery实现转盘抽奖
jquery实现转盘抽奖 一.总结 一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...
- js实现转盘抽奖
大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现. 通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐. 这 ...
- javascript 转盘抽奖代码和计数器代码
要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下 看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究... 效果预览: 一.模拟抽奖的实 ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
- jquery实现抽奖
用jquery实现抽奖小程序 用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...
- css3转盘抽奖
做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...
- jquery实现抽奖小游戏
在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面: 下面我将给大家介绍下如何通过javascript来实现这样的一个抽奖功能,主要从下面三个步骤入手(文中着重介绍第三部分有关功能的实现): 1. ...
随机推荐
- nodejs中的路由
一.路由初步 url.parse(string).query | url.parse(string).pathname | | | | | ------ -------------------http ...
- 抓包工具Wireshark的使用
WireShark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息. WireShark界面简介 启动WireShark的界面如下: 选择网卡 wireshar ...
- Java对象序列化的使用和定制
序列化的概念及使用场合 序列化就是把对象转化为字节序列并持久化保存,可以保存在内存中.磁盘文件系统,甚至通过网络传递,并能够在以后将这个字节序列完全恢复为原来的对象. 对象序列化的概念引入Java是为 ...
- JS日期加减指定天数
JS中没有直接操作日期加减的方法,只能通过Date对象获取当前天数加减之后setDate,以此来达到操作日期的目的 JS中对指定日期加减指定天数,具体方法如下: function addDate(da ...
- F# 语法概览
F#和C#的语法差别 语法上,F#和C#有两个主要差别: 用缩进而非花括号分隔代码块 用空白而非逗号分隔参数 F#常见语法元素 以下是F#代码中常见的语法元素 注释 // 这是单行注释 (* 这是多行 ...
- Solr5.2.1+Zookeeper3.4.8分布式集群搭建
1.选取三台服务器 由于机器比较少,现将zookeeper和solr都部署在以下三台机器上.(以下操作都是在172.16.20.101主节点上进行的哦) 172.16.20.101 主节点 172.1 ...
- windows系统下安装composer
使用安装程序安装 这是将 Composer 安装在你机器上的最简单的方法. 下载并且运行 Composer-Setup.exe,它将安装最新版本的 Composer 安装完成后,将composer的b ...
- 遍历Arraylist的方法
package com.test; import java.util.ArrayList; import java.util.Iterator; import java.util.List; publ ...
- iOS开发之JSON解析
JSON解析步骤: - (NSArray *)products { if (_products == nil) { //第一步:获取JSON文件的路径: NSString *path = [[NSBu ...
- Android学习笔记---前传
在正式的撰写个人的学习笔记前,先对个人的学习经历做一个简要的介绍.座右铭:诚不欺我 1. 前言 本人非软件工程出身,属于半路出家,误打误撞进入这个行业,初心是软件开发的门槛低,自以为学习过C语言,轻度 ...