代码如下：

   <!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. [占位-未完成]scikit-learn一般实例之十二:用于RBF核的显式特征映射逼近

    It shows how to use RBFSampler and Nystroem to approximate the feature map of an RBF kernel for clas ...

  2. Create an offline installation of Visual Studio 2017 RC

    Create an offline installation of Visual Studio 2017 RC ‎2016‎年‎12‎月‎7‎日                             ...

  3. 8 种提升 ASP.NET Web API 性能的方法

    ASP.NET Web API 是非常棒的技术.编写 Web API 十分容易,以致于很多开发者没有在应用程序结构设计上花时间来获得很好的执行性能. 在本文中,我将介绍8项提高 ASP.NET Web ...

  4. python 数据类型 ---字符串

    1. 字符串去除空白 ,strip() , 包括空格,tab键, 换行符 >>> name = " Frank " >>> name.strip ...

  5. FunDA（2）－ Streaming Data Operation：流式数据操作

    在上一集的讨论里我们介绍并实现了强类型返回结果行.使用强类型主要的目的是当我们把后端数据库SQL批次操作搬到内存里转变成数据流式按行操作时能更方便.准确.高效地选定数据字段.在上集讨论示范里我们用集合 ...

  6. QT数据库连接的几个重要函数的使用及注意事项（原创）

    注:在这里数据库对象等同于数据库连接对象,也就是QSqlDatabase类的对象 QSqlDatabase QSqlDatabase::addDatabase((const QString & ...

  7. SSH远程登录原理与运用

    SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不开它,很多普通用户也每天使用. SSH具备多种功能,可以用于 ...

  8. [转载]C#委托和事件(Delegate、Event、EventHandler、EventArgs)

    原文链接:http://blog.csdn.net/zwj7612356/article/details/8272520 14.1.委托 当要把方法作为实参传送给其他方法的形参时,形参需要使用委托.委 ...

  9. 使用cmd打开java文件，报错：“错误，编码GBK的不可映射字符”

    今天使用EditPlus写了一个小程序,用cmd运行时报错--"错误,编码GBK的不可映射字符". 处理办法是用EditPlus另存为时,把编码格式由UTF-8改为ANSI. 然后 ...

  10. Cleave.js – 自动格式化表单输入框的文本内容

    Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...