代码如下：

   <!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>

效果预览:

demo下载地址

WebApp 九宫格抽奖简易demo的更多相关文章

  1. WebSocket基于javaweb+tomcat的简易demo程序

    由于项目需要,前端向后台发起请求后,后台需要分成多个步骤进行相关操作,而且不能确定各步骤完成所需要的时间 倘若使用ajax重复访问后台以获取实时数据,显然不合适,无论是对客户端,还是服务端的资源很是浪 ...

  2. 同事问如何判断同花顺，我用javascript的二维数组写了个简易demo

    有个前同事在群里问如何判断是否为同花顺我用javascript的二维数组写了个简易demo. <!DOCTYPE html> <html> <body> <s ...

  3. Js写九宫格抽奖

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

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

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

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

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

  6. jq demo 九宫格抽奖

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. iOS学习之网易新闻简易Demo

    简易NewsDemo代码分析 界面布局就不多说了.效果图:(自定义了三套Cell,最后一套Cell是页面最下方的"正在加载中..."Cell,图三.)         主要分析工程 ...

  8. 【javascript】九宫格抽奖组件设计

    一些主要点 1. 转圈的顺序(顺时针或者逆时针): 2. 转圈的速率(从慢到快再到慢): 3. 位置的问题(下一次抽奖的起始位置是上一次抽奖的结束位置): 4. 转圈的圈数或者移动的次数. 基本原理 ...

  9. 微信小程序入门学习-- 简易Demo：计算器

    简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...

随机推荐

  1. 用Crontab打造简易工作流引擎

    1. 引言 众所周知,Oozie(1, 2)是基于时间条件与数据生成来做工作流调度的,但是Oozie的数据触发条件只支持HDFS路径,故而面临着这样的问题: 无法判断Hive partition是否已 ...

  2. 高分辨率下IE浏览器缩放导致出现右侧滚动条问题的解决

    0 问题描述 由于需要演示触控操作,采购了SurfacePro,SurfacePro的推荐分辨率为2736×1824,且默认缩放比例为200%,IE浏览器的默认缩放比例也是200%,这样就导致右侧出现 ...

  3. APNS 远程推送通知 PUSH deviceToken

    服务器向客户端推送消息:      当应用程序推到后台,或者根本就没有运行(我们的代码无能为力)      如果这种情况之下,应用程序想和用户交互(传统的做法 不可能)      推送 APNS:Ap ...

  4. [Asp.net 5] Caching-缓存预告

    本节讲Asp.net 5的缓冲.解决方案可以通过网址:https://github.com/aspnet/Caching下载 也是Asp.net 5开源代码介绍的第6部分,前5部分链接如下: 1. D ...

  5. 应用.Net+Consul维护RabbitMq的高可用性

    懒人学习的过程就是工作中老大让干啥让做啥就研究研究啥,国庆放假回来的周末老大通过钉钉给我布置了个任务, RabbitMQ高可用解决方案,我想说钉钉太坑了: 这是国庆过后9号周日晚上下班给的任务,我周一 ...

  6. 初识Spring框架实现IOC和DI(依赖注入)

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的, IoC是 ...

  7. datatables中的Options总结(1)

    datatables中的Options总结(1) 最近一直研究dataTables插件,下面是总结的所有的选项内容,用了帮助学习datatables插件. 这些选项的配置在$().Datatable( ...

  8. kmdjs和循环依赖

    循环依赖 循环依赖是非常必要的,有的程序写着写着就循环依赖了,可以提取出一个对象来共同依赖解决循环依赖,但是有时会破坏程序的逻辑自封闭和高内聚.所以没解决好循环依赖的模块化库.框架.编译器都不是一个好 ...

  9. node.js+socket.io配置详解

    由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...

  10. Curator框架的使用

    Curator框架的目的是减少用户的复杂度,毕竟原生的Zookeeper难以使用. 这里举一个使用例子. 第一步:建立连接 // 以下代码与192.168.1.101:2181建立了连接Curator ...