jquery实现抽奖功能
本文实例为大家分享了jquery实现抽奖功能的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#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/9.jpg) no-repeat top center;
}
#lottery table td a:hover {
background-image: url(img/11.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/1.jpg">
<div class="mask"></div>
</td>
<td class="lottery-unit lottery-unit-1">
<img src="img/2.jpg">
<div class="mask"></div>
</td>
<td class="lottery-unit lottery-unit-2">
<img src="img/3.jpg">
<div class="mask"></div>
</td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-7">
<img src="img/4.jpg">
<div class="mask"></div>
</td>
<!-- 点击触发抽奖 -->
<td><a href="#" rel="external nofollow" ></a></td>
<td class="lottery-unit lottery-unit-3">
<img src="img/5.jpg">
<div class="mask"></div>
</td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-6">
<img src="img/6.jpg">
<div class="mask"></div>
</td>
<td class="lottery-unit lottery-unit-5">
<img src="img/7.jpg">
<div class="mask"></div>
</td>
<td class="lottery-unit lottery-unit-4">
<img src="img/8.jpg">
<div class="mask"></div>
</td>
</tr>
</table>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript">
var lot = $(".lottery-unit");
var nowIndex = -1; //记录添加激活类的下标
var btn = $("table").find("a")
console.log(btn)
var curIndex = null; //记录上一次坐标
var round = 0; //记录移动几圈
var n = 0; //记录移动了多少次
var timer = null; //旋转计时器
var priceIndex = (Math.random()*lot.length) | 0; //中奖的下标
console.log(priceIndex)
var isClick = true;
function move(){
n++;
nowIndex++;
if(n%8==0){
round++;
console.log("跑了"+round+"圈");
if(round>=3){
clearInterval(timer);
timer = setInterval(move,50)
}
if(round > 8){
clearInterval(timer);
timer = setInterval(move,1000)
}
}
// 第二种方式
// if(n>=8 && n<12){
// clearInterval(timer)
// timer = setInterval(move,50)
// }
// if(n>=12){
// clearInterval(timer)
// timer = setInterval(move,50)
// }
lot.filter(".lottery-unit-"+nowIndex).addClass("active")
// 当curIndex为0时，布尔值为false，所以要加curIndex==0
if(curIndex || curIndex==0){
lot.filter(".lottery-unit-"+curIndex).removeClass("active")
}
curIndex = nowIndex;
// 如何实现中奖
if(nowIndex == priceIndex && round > 8){
clearInterval(timer);
if(priceIndex==1){
setTimeout(function(){
alert("111111")
},1000)
}
// 重置参数
isClick = true;
round = 0;
nowIndex = -1;
curIndex = null;
priceIndex = (Math.random()*lot.length) | 0;
console.log("中奖的下标",priceIndex)
}
if(nowIndex>=lot.length-1){
nowIndex=-1;
}
}
btn.click(function(){
if(isClick){
console.log("开始抽奖");
isClick = false;
timer = setInterval(move,100);
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
需求: 最多可以抽奖5次,而且,每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="play
-
jquery实现九宫格大转盘抽奖
下面我们来分享一个九宫格抽奖特效 特效说明: 一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置.奖品数量.转动次数.中奖位置参数.(兼容测试:IE7及以上.Firefox.Chrome.Opera.Safari.360等主流浏览器) HTML: <!--效果html开始--> <div id="lottery"> <table border="0" cellpadding="0&q
-
jquery 抽奖小程序实现代码
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序.最后介绍了后面关于抽奖小程序的一些后面更新的方向和Math.random的一些小知识.(最终结果保存在:http://runjs.cn/detail/rq3bbhto,点击可查看效果) 下面先看一个简单的抽奖小程序的例子: html: <div class="g-lottery-box&quo
-
jQuery实现转动随机数抽奖效果的方法
本文实例讲述了jQuery实现转动随机数抽奖效果的方法.分享给大家供大家参考.具体实现方法如下: <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script src="jquery-1.6.2.min.js" type="text/jav
-
jquery 年会抽奖程序
看了一下,传不了源代码,特粘帖html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
-
jquery——九宫格大转盘抽奖实例
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510
-
jQuery实现类似老虎机滚动抽奖效果
本文实例讲述了jQuery实现类似老虎机滚动抽奖效果.分享给大家供大家参考.具体如下: 这里使用jquery实现类似老虎机的网页抽奖功能,只是一个简单的投资功能实现,还有一些地方是需要完善的,比如抽奖快结束的时候,不会自动变慢速度,哪位高手感兴趣的话可以加以完善. 实现效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
-
jquery实现转盘抽奖功能
实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现 google code地址:http://code.google.com/p
-
jquery输入数字随机抽奖特效的简单实现代码
简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 我们</title><base target="_blank" /&g
-
jQuery+PHP实现的掷色子抽奖游戏实例
本文实例讲述了jQuery+PHP实现的掷色子抽奖游戏详细步骤.分享给大家供大家参考.具体分析如下: 该游戏是以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中.效果图如下: 完整实例代码点击此处本站下载. HTML部分: 首先我们需要准备两粒色子和奖品素材,这些作者已经打包上传了,请大家放心下载.我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信