代码如下：

  1.    <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 	<meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
  6. 	<title></title>
  7. 		<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
  8. 		<script type="text/javascript">
  9. 		 var  roll={
  10. 		 	Msgs:["一等獎","二等獎","三等獎","四等獎","五等獎","六等獎","七等獎","八等獎"],
  11. 		 	index:0,//当前位置索引
  12. 		 	times:0,//次数
  13. 		 	roundTimes:0,//圈数
  14. 		 	timer:0,//循环器
  15. 		 	speed:300,//转动速度
  16. 		 	isActive:false,//游戏是否在运行
  17. 		 	Init:function(){
  18. 		 		///初始化
  19. 		 		this.roundTimes=0;
  20. 		 		this.isActive=true;
  21. 		 	},
  22. 		 	Start:function(cls,callback){
  23. 		 		var  that=this;
  24. 		 		if(that.isActive==true)
  25. 		 		{
  26. 		 			alert('游戏正在进行!');
  27. 		 			return;
  28. 		 		}
  29. 		 		if(that.times==4)
  30. 		 		{
  31. 		 			alert('只有四次机会');
  32. 		 			return;
  33. 		 		}
  34. 		 		that.Init();
  35. 		 		var  interVal=setInterval(function(){
  36. 						if(that.index==8)
  37. 						{
  38. 							that.index=0;
  39. 							that.roundTimes++;
  40. 						}
  41. 						if(that.roundTimes==6)
  42. 						{
  43. 						   that.index=parseInt(Math.random()*7) ;
  44. 						$('li[class^='+cls+']').removeClass('active');
  45. 						$('.'+cls+'-'+ that.index).addClass('active');
  46. 						that.isActive=false;
  47. 						clearInterval(that.timer);
  48. 						if(Object.prototype.toString.call(callback)=='[object Function]')
  49. 						    {
  50. 						       	 callback.call(this,that.index,that.Msgs[that.index]);
  51. 						    }
  52. 						}
  53. 						else{
  54. 						   $('li[class^='+cls+']').removeClass('active');
  55. 						   $('.'+cls+'-'+ that.index).addClass('active');
  56. 						   that.index++;
  57. 						}
  58.  
  59. 					},100);
  60. 				that.timer=interVal;
  61. 				that.times++;
  62. 		 	}
  63. 		 }
  64.  
  65. 		 $(function(){
  66. 		 	$('#btnChouj').click(function(){
  67. 		 		roll.Start('prize',function(index,msg){
  68. 		 			setTimeout(function(){
  69. 		 				alert(msg);
  70. 		 			})
  71. 		 		});
  72. 		 	});
  73. 		 })
  74.  
  75. 		</script>
  76. 		<style type="text/css">
  77. 			html,body{
  78. 				margin:0  auto;
  79. 				padding: 0;
  80. 				width: 100%;
  81. 				 height: 100%;
  82. 			}
  83. 			#choujiangUL{
  84. 				list-style: none;
  85. 				position: absolute;
  86. 				width: 100%;
  87. 				height: 50%;
  88. 			}
  89. 			#choujiangUL li{
  90. 			  float: left;
  91. 			  width: 32%;
  92. 		/*	  height: 33.33%;*/
  93. 			  text-align: center;
  94. 			  border: 1px solid #CCCCCC
  95. 			  /*background-color: deepskyblue;*/
  96. 			 /*border: 1px solid white;*/
  97. 			}
  98. 			#choujiangUL li img{
  99. 			 	 width: 100px;
  100. 			 	 height: 100px;
  101. 			}
  102.  
  103. 			.active{
  104. 				background-color: #990000;
  105. 			}
  106. 		</style>
  107. 	</head>
  108. 	<body>
  109. 		<ul id="choujiangUL">
  110. 			<li class="prize-0 active">
  111. 				<img src="img/choujiang/1.png" />
  112. 			</li>
  113. 			<li class="prize-1">
  114. 				<img src="img/choujiang/2.png" />
  115. 			</li>
  116. 			<li class="prize-2">
  117. 				<img src="img/choujiang/3.png" />
  118. 			</li>
  119. 			<li class="prize-7">
  120. 				<img src="img/choujiang/4.png" />
  121. 			</li>
  122. 			<li id="btnChouj" >
  123. 				<img src="img/choujiang/choujiang.png" />
  124. 			</li>
  125. 			<li class="prize-3">
  126. 				<img src="img/choujiang/5.png" />
  127. 			</li>
  128. 			<li class="prize-6">
  129. 				<img src="img/choujiang/6.png" />
  130. 			</li>
  131. 			<li class="prize-5">
  132. 				<img src="img/choujiang/7.png" />
  133. 			</li>
  134. 			<li class="prize-4">
  135. 				<img src="img/choujiang/8.png" />
  136. 			</li>
  137.  
  138. 		</ul>
  139.  
  140. 	</body>
  141. </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一般实例之八:多标签分类

    本例模拟一个多标签文档分类问题.数据集基于下面的处理随机生成: 选取标签的数目:泊松(n~Poisson,n_labels) n次,选取类别C:多项式(c~Multinomial,theta) 选取文 ...

  2. alienware Win8 系统安装

    原作者网名 alienware-小来: 我的外星人 老是装系统出错.我觉得写的不错.把原作者的东西拿过来.. 对于win7系统的用户来说想要体验下win8.1系统,或者是原来win8.1系统加装固态后 ...

  3. C# - 多线程 之 信号系统

    基础概览 多线程之信号系统命名空间 using System.Threading; 线程同步类的继承层次关系图 终止状态和非终止状态 在终止状态下,被WaitOne()阻塞的线程会逐个得到释放.如果一 ...

  4. C#多线程--线程池（ThreadPool）

    先引入一下线程池的概念: 百度百科:线程池是一种多线程处理形式,处理过程中将任务添加到队列,然后在创建线程后自动启动这些任务.线程池线程都是后台线程.每个线程都使用默认的堆栈大小,以默认的优先级运行, ...

  5. expect基本使用方法

    参考: http://www.cnblogs.com/lzrabbit/p/4298794.html expect是linux系统中可以和子进程进行交互的一个命令,使用它可以做一些自动化工作.pyth ...

  6. Mysql增加、删除和修改列属性和约束，和一些有用的查询语句

    最近在整理关于MySql的东西,把一些需要记录的东西写下来,以便以后查询和浏览,以下是一些操作技巧.添加表字段alter table` 表名称` add transactor varchar(10) ...

  7. mybatis hibernate比较

    开发速度: 如果一个项目中用到的复杂的查询基本没有,就是简单的增删该查,这样选择hibernate效率就很快了,因为基本的sql语句已经被封装好了,根本不用去写sql语句,但是对于一个大型项目,复杂语 ...

  8. 让产品有效迭代，前端A/B Testing的简单实现

    A/B Testing简介 互联网产品的迭代速度很快,往往一周一小发布,一月一大发布,产品提出的种种需求,哪些改动是提升产品体验的,哪些是阻碍产品进步的,如果没有数据可以参考,仅仅是靠拍脑袋的话,对产 ...

  9. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  10. Ionic设置ion-slide-box不启用(不通过$ionicSlideBoxDelegate)

    猛地一看这个标题,可能觉得多此一举,直接$ionicSlideBoxDelegate. $getByHandle(handle). enableSlide(false)设置不就行了?是的,按理说就是这 ...