<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九宫格抽奖的更多相关文章

  1. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  2. Js写九宫格抽奖

    国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...

  3. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  4. jquery实现抽奖

    用jquery实现抽奖小程序   用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...

  5. jQuery九宫格图片拉伸变大代码

    之前看到网上有jQuery九宫格图片拉伸变大代码只可以动六张图片,我改了改做了九张图片都可以做的 图片的布局 成品就是每一个图片都可以动看到大图 css样式 <style> /*九宫格*/ ...

  6. PHP+Ajax微信手机端九宫格抽奖实例

    PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...

  7. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  8. 用jQuery编写简单九宫格抽奖

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 九宫格抽奖HTML+JS版

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. 消息中心 - Laravel的Redis队列(一)

    前言 Laravel的队列可以用在轻量级的队列需求中.比如我们系统中的短信.邮件等功能,这些功能有一些普遍的特征,异步.重试.并发控制等.Laravel现在主要支持的队列服务有Null.Sync.Da ...

  2. Java自动化测试框架-11 - TestNG之annotation与并发测试篇 (详细教程)

    1.简介 TestNG中用到的annotation的快速预览及其属性. 2.TestNG基本注解(注释) 注解 描述 @BeforeSuite 注解的方法只运行一次,在当前suite所有测试执行之前执 ...

  3. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  4. 七月月赛T3

    题目背景 本题时空限制已经扩大 题目描述 人比人,气死人:鱼比鱼,难死鱼.小鱼最近参加了一个“比可爱”比赛,比的是每只鱼的可爱程度.参赛的鱼被从左到右排成一排,头都朝向左边,然后每只鱼会得到一个整数数 ...

  5. Tomcat开启关闭常见问题

    启动 bin/startup.bat ,双击运行该文件即可 访问:浏览器输入: http://localhost:8080 回车访问自己 http://别人的ip:8080 访问别人 可能出现的问题: ...

  6. maven聚合(依赖聚合)

    maven聚合工程 原文地址:http://juvenshun.iteye.com/blog/305865 http://blog.csdn.NET/woxueliuyun/article/detai ...

  7. 【Error】Maven Dependency 下载失败问题

    原文 前言 在使用Maven私服Sonatype Nexus的时候,经常会出现依赖包找不到的问题. 此时通过浏览器去私服页面查看,发现依赖包坐标是存在的,对应的文件(比如jar文件). 或者私服上面也 ...

  8. 利用SSH隧道技术穿越内网访问远程设备

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/11899478.html 通常,我们用于调试的计算机无法远程访问位于局域网中的待调试设备. ...

  9. Docker解决下载镜像速度慢

    Docker安装好以后要用Docker pull命令下载镜像,但是会出现下载很慢的现象.Docker默认是国外的源,配置国内镜像仓库. 1.cd /etc/docker/路径下 2.编辑daemon. ...

  10. ArcGIS API For Javascript:新增热力图层的方法

    当我们要制作一个热力图层,可以通过以下 3 步来实现: 引入类 在 require 中需引入 "esri/layers/FeatureLayer", "esri/rend ...