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 ...
随机推荐
- NLP预训练模型-百度ERNIE2.0的效果到底有多好【附用户点评】
ERNIE是百度自研的持续学习语义理解框架,该框架支持增量引入词汇(lexical).语法 (syntactic) .语义(semantic)等3个层次的自定义预训练任务,能够全面捕捉训练语料中的词法 ...
- git 陷阱小记
1.文件添加陷阱: 1).git 提交命令快捷键: git commit -a -m "",能够跳过git添加文件到暂存目录步骤 2)git add . git commit -m ...
- 「Usaco2008 Jan」人工湖O(∩_∩)O 纯属的模拟+栈
题目描述 夏日那让人喘不过气的酷热将奶牛们的烦躁情绪推到了最高点.最终,约翰决定建一个人工湖供奶牛消暑之用. 为了使湖看起来更加真实,约翰决定将湖的横截面建成N(1≤N≤105)个连续的平台高低错落的 ...
- 01-MyBatis启动流程分析
目录 MyBatis简单介绍 启动流程分析 简单总结 附录 MyBatis内置别名转换 参考 MyBatis简单介绍 MyBatis是一个持久层框架,使用简单,学习成本较低.可以执行自己手写的SQL语 ...
- linux 安装swoole扩展方法
linux 安装swoole扩展方法 wget https://github.com/swoole/swoole-src/archive/v1.9.23.tar.gz接下去就不说了 说明下 下载swo ...
- 007.Kubernetes二进制部署Flannel
一 部署flannel 1.1 安装flannel kubernetes 要求集群内各节点(包括 master 节点)能通过 Pod 网段互联互通.flannel 使用 vxlan 技术为各节点创建一 ...
- python模块——socket
实例一. server: #socket套接字(IP + 端口号)(qq,wechat 发送接收消息依靠socket模块),cs架构import socketserver = socket.socke ...
- javax.persistence.PersistenceException: org.hibernate.exception.GenericJDBCException: ResultSet is from UPDATE. No Data.
Java jpa调用存储过程,抛出异常如下: javax.persistence.PersistenceException: org.hibernate.exception.GenericJDBCEx ...
- @Transactional 的回滚
默认情况下,Exception是不会引起回滚操作的,RuntimeException才会引起回滚操作. 当然如果所有的Exception都要回滚的话,直接@Transactional(rollback ...
- Docker笔记(十二):Docker Compose入门
1. Compose简介 Docker Compose是Docker官方的用于对Docker容器集群实现编排,快速部署分布式应用的开源项目.Docker Compose通过docker-compose ...