<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. Unity3-各个内置面板,对象说明

    *在Inspector面板中,是表示每个物体(诸如摄像机,圆柱,正方体)的组件. 组件包含: 1.Transform,在第一节当中,可以用于变换物体的位置.每个物体对象都有. 2.cube,网格,对于 ...

  2. NOIP模拟 9

    %liu_runda Orz T1 随 矩阵快速幂结合概率期望 但n3无法承受 利用原根的性质,将乘法转化成加法 就变成循环矩阵n^2了 改题时苦b地卡了关:误把1当成原根的1次方,错误地认为矩阵的阶 ...

  3. spring boot打包成war包的页面该放到哪里?

    背景 经常有朋友问我,平时都是使用spring mvc,打包成war包发布到tomcat上,如何快速到切换到spring boot的war或者jar包上? 先来看看传统的war包样式是什么样子的? 1 ...

  4. js简单函数(动态交互)

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  5. Promise A+ 规范【中文版】

    0. 前言 本文为Promise A+规范的中文译文,Promise A+规范英文版原文链接:Promise A+. 正文如下: 一个开放.健全且通用的 JavaScript Promise 标准.由 ...

  6. 如何编译安装Linux内核

    操作系统环境 VMware workstation15 Pro ubuntu18.04 LTS 待编译内核5.3.10版本 内核下载地址 kernel.org 环境配置 在正式编译前需要安装部分软件. ...

  7. java中线程同步的几种方法

    1.使用synchronized关键字 由于java的每个对象都有一个内置锁,当用此关键字修饰方法时, 内置锁会保护整个方法.在调用该方法前,需要获得内置锁,否则就处于阻塞状态. 注: synchro ...

  8. 直接引用MrAdvice.dll文件不能实现AOP拦截,教你1分钟解决这个问题

    直接引用MrAdvice.dll文件不能实现AOP拦截,教你1分钟解决这个问题.近日工作中,要实现一个功能,那就是业务层方法里面实现自动缓存.编写业务的C#开发人员只关注如何将业务代码编写正确就可以了 ...

  9. 启动Spring Tool Suite 4时出现 could not find tools.jar spring boot live hovers....弹窗

    第一步:检查一下STS启动时的加载环境 Help  —› About Spring Tool Suite 4 —› Installation Details —› Configuration 本人已经 ...

  10. 矢量图形(Vector Picture, SVG, PDF)转TiKZ代码

    在使用LaTeX的过程中,我们需要往往需要使用一些图片,譬如,在样式文件中,但是如果在样式文件中使用外部的图片,总感觉不是那么地舒服「请原谅强迫症」.因此,想办法将图形内嵌入LaTeX文件. 首先,我 ...