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 ...
随机推荐
- pymssql连接Azure SQL Database
使用pymssql访问Azure SQL Database时遇到"DB-Lib error message 20002, severity 9:\nAdaptive Server conne ...
- git .gitignore详解
1.最近使用git又遇到一个陷阱: 场景:A和B使用的不同的编译器做的同一个解决方案下的不同的项目工程,刚开始没考虑到版本问题,后来发现A上传的csproj在B需要做很麻烦修改才能打开,后来想到各自用 ...
- 《Effective Java》 读书笔记(四) 使用私有构造方法执行非实例化
在许多时候,我们会写一个类,这个类只是用来提供一些静态方法或静态属性,就好像C++的函数一样,比如 java.lang.Math,java.util.Arrays等,但是有时候这些类的用户可能会在无意 ...
- Git学习笔记----基础运用
安装Git Windows: 进入官网下载或百度网盘下载 Git(V2.23_x64) 提取码:uf2x Ubuntu: sudo apt-get -install git 安装完成之后打开git命令 ...
- [知识图谱]Neo4j知识图谱构建(neo4j-python-pandas-py2neo-v3)
neo4j-python-pandas-py2neo-v3 利用pandas将excel中数据抽取,以三元组形式加载到neo4j数据库中构建相关知识图谱 Neo4j知识图谱构建 1.运行环境: pyt ...
- android 7.0 pm install 失败问题
这两天,把app内置成系统文件或者系统签名取得系统权限,发现使用pm install path在低版本上可行,在高版本就安装失败 抛出 NullPointException,查看了一下源码,发现对包名 ...
- [考试反思]0807NOIP模拟测试14:承认
一大排并列Rank#9之一. 考试题还没改完(而且并不会模拟退火)所以题解又只能咕了 然而并不想吐槽T2对sjzyz是原题导致4个AC里面有3个他们的 虽说这次的成绩不怎么样,但是这次的考试过程是全新 ...
- 单(single):换根dp,表达式分析,高斯消元
虽说这题看大家都改得好快啊,但是为什么我感觉这题挺难.(我好菜啊) 所以不管怎么说那群切掉这题的大佬是不会看这篇博客的所以我要开始自嗨了. 这题,明显是树dp啊.只不过出题人想看你发疯,询问二合一了而 ...
- 常用的webpack优化方法
1. 前言 关于webpack,相信现在的前端开发人员一定不会陌生,因为它已经成为前端开发人员必不可少的一项技能,它的官方介绍如下: webpack 是一个模块打包器.webpack的主要目标是将 J ...
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...