WebApp 九宫格抽奖简易demo
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script type="text/javascript">
var roll={
Msgs:["一等獎","二等獎","三等獎","四等獎","五等獎","六等獎","七等獎","八等獎"],
index:0,//当前位置索引
times:0,//次数
roundTimes:0,//圈数
timer:0,//循环器
speed:300,//转动速度
isActive:false,//游戏是否在运行
Init:function(){
///初始化
this.roundTimes=0;
this.isActive=true;
},
Start:function(cls,callback){
var that=this;
if(that.isActive==true)
{
alert('游戏正在进行!');
return;
}
if(that.times==4)
{
alert('只有四次机会');
return;
}
that.Init();
var interVal=setInterval(function(){
if(that.index==8)
{
that.index=0;
that.roundTimes++;
}
if(that.roundTimes==6)
{
that.index=parseInt(Math.random()*7) ;
$('li[class^='+cls+']').removeClass('active');
$('.'+cls+'-'+ that.index).addClass('active');
that.isActive=false;
clearInterval(that.timer);
if(Object.prototype.toString.call(callback)=='[object Function]')
{
callback.call(this,that.index,that.Msgs[that.index]);
}
}
else{
$('li[class^='+cls+']').removeClass('active');
$('.'+cls+'-'+ that.index).addClass('active');
that.index++;
} },100);
that.timer=interVal;
that.times++;
}
} $(function(){
$('#btnChouj').click(function(){
roll.Start('prize',function(index,msg){
setTimeout(function(){
alert(msg);
})
});
});
}) </script>
<style type="text/css">
html,body{
margin:0 auto;
padding: 0;
width: 100%;
height: 100%;
}
#choujiangUL{
list-style: none;
position: absolute;
width: 100%;
height: 50%;
}
#choujiangUL li{
float: left;
width: 32%;
/* height: 33.33%;*/
text-align: center;
border: 1px solid #CCCCCC
/*background-color: deepskyblue;*/
/*border: 1px solid white;*/
}
#choujiangUL li img{
width: 100px;
height: 100px;
} .active{
background-color: #990000;
}
</style>
</head>
<body>
<ul id="choujiangUL">
<li class="prize-0 active">
<img src="img/choujiang/1.png" />
</li>
<li class="prize-1">
<img src="img/choujiang/2.png" />
</li>
<li class="prize-2">
<img src="img/choujiang/3.png" />
</li>
<li class="prize-7">
<img src="img/choujiang/4.png" />
</li>
<li id="btnChouj" >
<img src="img/choujiang/choujiang.png" />
</li>
<li class="prize-3">
<img src="img/choujiang/5.png" />
</li>
<li class="prize-6">
<img src="img/choujiang/6.png" />
</li>
<li class="prize-5">
<img src="img/choujiang/7.png" />
</li>
<li class="prize-4">
<img src="img/choujiang/8.png" />
</li> </ul> </body>
</html>
效果预览:
WebApp 九宫格抽奖简易demo的更多相关文章
- WebSocket基于javaweb+tomcat的简易demo程序
由于项目需要,前端向后台发起请求后,后台需要分成多个步骤进行相关操作,而且不能确定各步骤完成所需要的时间 倘若使用ajax重复访问后台以获取实时数据,显然不合适,无论是对客户端,还是服务端的资源很是浪 ...
- 同事问如何判断同花顺，我用javascript的二维数组写了个简易demo
有个前同事在群里问如何判断是否为同花顺我用javascript的二维数组写了个简易demo. <!DOCTYPE html> <html> <body> <s ...
- Js写九宫格抽奖
国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...
- PHP+Ajax微信手机端九宫格抽奖实例
PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...
- php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
- jq demo 九宫格抽奖
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- iOS学习之网易新闻简易Demo
简易NewsDemo代码分析 界面布局就不多说了.效果图:(自定义了三套Cell,最后一套Cell是页面最下方的"正在加载中..."Cell,图三.) 主要分析工程 ...
- 【javascript】九宫格抽奖组件设计
一些主要点 1. 转圈的顺序(顺时针或者逆时针): 2. 转圈的速率(从慢到快再到慢): 3. 位置的问题(下一次抽奖的起始位置是上一次抽奖的结束位置): 4. 转圈的圈数或者移动的次数. 基本原理 ...
- 微信小程序入门学习-- 简易Demo：计算器
简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...
随机推荐
- Java进击C#——应用开发之Asp.net
本章简言 上一章中笔者讲到关于Linq和EF的用法.并以hibernate来进行讲解.那么本章笔者来讲一下C#的Asp.Net.即是在B/S模式下开发.现在企业大部分的业务都是面向B/S模式的.所以对 ...
- c#+handle.exe实现升级程序在运行时自动解除文件被占用的问题
我公司最近升级程序经常报出更新失败问题,究其原因,原来是更新时,他们可能又打开了正在被更新的文件,导致更新文件时,文件被其它进程占用,无法正常更新而报错,为了解决这个问题,我花了一周时间查询多方资料及 ...
- Guass列选主元消去法和三角分解法
最近数值计算学了Guass列主消元法和三角分解法解线性方程组,具体原理如下: 1.Guass列选主元消去法对于AX =B 1).消元过程:将(A|B)进行变换为,其中是上三角矩阵.即: k从1到n-1 ...
- 自己封装的一个原生JS拖动方法。
代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...
- Entity Framework 教程——模型浏览器
模型浏览器: 在之前的章节中,我们创建了第一个关于学校的实体数据模型.但是EDM设计器并没有将他所创建的所有对象完全显示出来.它只将数据库中的被选择的表与视图显示出来了. 模型浏览器可以将EDM所创建 ...
- 使用Adminlite + ASP.NET MVC5(C#) + Entityframework + AutoFac + AutoMapper写了个api接口文档管理系统
一.演示: 接口查看:http://apidoc.docode.top/ 接口后台:http://apiadmin.docode.top/ 登录:administrator,123456 二.使用到的 ...
- StringBuilder的使用
今天用到了StringBuilder来拼接查询语句,发现这个真好用,决定做个小结. 百度一个StringBuilder的定义:String 对象是不可改变的.每次使用 System.String 类中 ...
- IOS 2D游戏开发框架 SpriteKit-->续(创建敌对精灵)
这次包括之后讲的spritekit 我都会围绕一个案例来说,这个案例就是一个简单的2d飞机大战游戏,今天这里我讲创建敌对精灵,就是敌对飞机,敌对飞机不停的被刷新到屏幕上.....当然这里涉及到的类其实 ...
- 记录一次bug解决过程：resultType和手动开启事务
一.总结 二.BUG描述:MyBatis中resultType使用 MyBatis中的resultType类似于入参:parameterType.先看IDCM项目中的实际使用案例代码,如下: // L ...
- [moka同学笔记]PHPexcel之excel导出和导入
原案例来自http://www.sucaihuo.com/有修改 1.目录结构(文件不用解释,应该都可以看得懂,直接看代码)