jQuery九宫格抽奖
<div id="box">
<div class="content content-1">1</div>
<div class="content content-2">2</div>
<div class="content content-3">3</div>
<div class="content content-8">8</div>
<div class="content content-click">
<div id="text">
<div>点击抽奖</div>
<div>您还有<span class="number">3</span>次抽奖机会</div>
</div>
</div>
<div class="content content-4">4</div>
<div class="content content-7">7</div>
<div class="content content-6">6</div>
<div class="content content-5">5</div>
</div>
#box {
width:45%;
perspective:1200px;
float:left;
margin-left:30%;
}
.content {
float:left;
width:30%;
border:1px solid red;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
font-size:24px;
color:red;
}
.content-click {
background:rgba(139,0,0,0.6);
color:white;
font-size:18px;
text-align:center;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:center;
}
.content-click:hover {
background:rgba(139,0,0,1);
}
.active {
background:goldenrod;
color:white;
}
$('.content').height($('.content').width()+'px')
$(window).resize(function(){
$('.content').height($('.content').width()+'px')
})
function time(a){
return function(){
if(a>8){
a=parseInt(a%8)
if(a==0){
a=8
}
}
$('.content').removeClass('active');
$('.content-'+a).addClass('active');
}
}
// 在旋转的时候不能再次被点击
var t=true
$('.content-click').click(function(){
if(t){
t=false;
// 产生随机数
var prize=Math.ceil(Math.random()*($('.content').length-1));
// 控制概率,永远不是8
if(prize==8){
prize=Math.ceil(Math.random()*($('.content').length-2));
}
if($('.number').html()>0){
$('.number').html($('.number').html()-1)
// 默认先转3圈
prize+=32
for(var i=1;i<=prize;i++){
setTimeout(time(i),6*i*i);
}
setTimeout(function(){
t=true;
},6*prize*prize)
}else{
alert('您没有抽奖机会了')
}
}
})
jQuery九宫格抽奖的更多相关文章
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
- Js写九宫格抽奖
国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
- jquery实现抽奖
用jquery实现抽奖小程序 用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...
- jQuery九宫格图片拉伸变大代码
之前看到网上有jQuery九宫格图片拉伸变大代码只可以动六张图片,我改了改做了九张图片都可以做的 图片的布局 成品就是每一个图片都可以动看到大图 css样式 <style> /*九宫格*/ ...
- PHP+Ajax微信手机端九宫格抽奖实例
PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...
- php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
- 用jQuery编写简单九宫格抽奖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 九宫格抽奖HTML+JS版
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- UVA12433 【Rent a Car】
这题应该算是比较难的一道网络流的题,(但却在我校OJ考试上出现了),但是大家只要能理解此图的建边方式就行. 假设有5天的租车需求,虚拟出2*n+2 即 12个节点,0为源点,12为汇点. 1,源点到1 ...
- python私有变量的分类
- Linux修改主机名!(图文)
本篇作为之前的补充篇,如果想修改自己的主机名,方便老师检查作业是否是自己做的,可以用修改主机名的方法,那么怎么修改呢? 一. 使用hostname命令 比如我现在的主机名是haozhikuan-hbz ...
- 安装cnpm遇到的问题
安装 cnpm时,用git安装时,安装好node环境后,测试版本号node -v和npm -v都没问题,可以输出版本号,但是安装cnpm时,使用淘宝镜像安装后,会出现如下警告: 这个是提醒你安装的版本 ...
- python 类内部装饰器的实现 与 参数解构学习
学习了函数的装饰器的写法,然后想到如果要在类中初始化或获取信息时能用装饰器做过滤和验证应该怎么写呢, 在网上查了下相关信息,感觉这样也是可以的,不知道会不会有什么问题class Ctj(): clas ...
- 详解Spring Security的formLogin登录认证模式
一.formLogin的应用场景 在本专栏之前的文章中,已经给大家介绍过Spring Security的HttpBasic模式,该模式比较简单,只是进行了通过携带Http的Header进行简单的登录验 ...
- 小程序 数字过千 以K显示
先新建一个 wxs 文件 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块. 每个模块都有自己独立的作用域.即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见. ...
- Jquery才可以使用 this 指定当前DOM
Jquery才可以使用 this 指定当前DOM jquery获取并设置它的元素 <div class="shop-item" style="line-height ...
- nyoj 204-Coin Test (python count)
204-Coin Test 内存限制:64MB 时间限制:3000ms 特判: No 通过数:2 提交数:2 难度:1 题目描述: As is known to all,if you throw a ...
- Bootstrap——导航条(navbar)
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...