摇奖-大转盘-js内容

大转盘活动中；调用转盘的js文件

stopIndex 表示停止的位置；
initMap 表示后台中奖的信息和前台页面对应关系；
转盘的转动方向为  左上角--->右上角--->  右下角---> 左下角；对应的坐标为 1 -2 -3-4-5-6-7-8-9-10-11-12 
其中右下角的坐标为 7 （免单）；
在停止后可以调用
coupon.showAlert();
  1. /*
  2.  * 删除左右两端的空格
  3.  */
  4. function Trim(str) {
  5.     return str.replace(/(^\s*)|(\s*$)/g, "");
  6. }
  8. /*
  9.  * 定义数组
  10.  */
  11. function GetSide(m, n) {
  12.     // 初始化数组
  13.     var arr = [];
  14.     for (var i = 0; i < m; i++) {
  15.         arr.push([]);
  16.         for (var j = 0; j < n; j++) {
  17.             arr[i][j] = i * n + j;
  18.         }
  19.     }
  20.     // 获取数组最外圈
  21.     var resultArr = [];
  22.     var tempX = 0,
  23.     tempY = 0,
  24.     direction = "Along",
  25.     count = 0;
  26.     while (tempX >= 0 && tempX < n && tempY >= 0 && tempY < m && count < m * n) {
  27.         count++;
  28.         resultArr.push([tempY, tempX]);
  29.         if (direction == "Along") {
  30.             if (tempX == n - 1) tempY++;
  31.             else tempX++;
  32.             if (tempX == n - 1 && tempY == m - 1) direction = "Inverse"
  33.         } else {
  34.             if (tempX == 0) tempY--;
  35.             else tempX--;
  36.             if (tempX == 0 && tempY == 0) break;
  37.         }
  38.     }
  39.     return resultArr;
  40. }
  42. var index = 0,
  43. // 当前亮区位置
  44. prevIndex = 0,
  45. // 前一位置
  46. Speed = 300,
  47. // 初始速度
  48. Time, // 定义对象
  49. arr = GetSide(4, 4),
  50. // 初始化数组
  51. EndIndex = 0,
  52. // 决定在哪一格变慢
  53. tb = document.getElementById("tb"),
  54. // 获取tb对象
  55. cycle = 0,
  56. // 转动圈数
  57. EndCycle = 0,
  58. // 计算圈数
  59. flag = false,
  60. // 结束转动标志
  61. quick = 0; // 加速
  62. var stopIndex = '3';
  63. btn = document.getElementById("btn1")
  65. function StartGame() {
  66. 	
  67.     clearInterval(Time);
  68.     cycle = 0;
  69.     flag = false;
  70.     EndIndex = Math.floor(Math.random() * 12);
  71.     // EndCycle=Math.floor(Math.random()*4);
  72.     EndCycle = 1;
  73.     Time = setInterval(Star, Speed);
  74. }
  75. function stop(data){
  76. 	return data+'';
  77. }
  78. function Star() {
  79.     // 跑马灯变速
  80.     if (flag == false) {
  81.         // 走五格开始加速
  82.         if (quick == 4) {
  83.             clearInterval(Time);
  84.             Speed = 50;
  85.             Time = setInterval(Star, Speed);
  86.         }
  87.         // 跑N圈减速
  88.         if (cycle == EndCycle + 1 && index == parseInt(EndIndex)) {
  89.             clearInterval(Time);
  90.             Speed = 300;
  91.             flag = true; // 触发结束
  92.             Time = setInterval(Star, Speed);
  93.         }
  94.     }
  96.     if (index >= arr.length) {
  97.         index = 0;
  98.         cycle++;
  99.         if(cycle >=3){
  100.         	flag = true;
  101.         }
  102.     }
  104.     // 结束转动并选中号码
  105.     // trim里改成数字就可以减速，变成Endindex的话就没有减速效果了
  106.     if (flag == true && index == parseInt(Trim(stopIndex+'')) - 1) {
  107.         quick = 0;
  108.         clearInterval(Time);
  109.         coupon.showAlert();
  110.     }
  111.     tb.rows[arr[index][0]].cells[arr[index][1]].className = "playcurr";
  112.     if (index > 0) prevIndex = index - 1;
  113.     else {
  114.         prevIndex = arr.length - 1;
  115.     }
  116.     tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className = "playnormal";
  117.     index++;
  118.     quick++;
  119. }
  120. /***
  121.  * 映射奖品关系
  122.  * */
  123. function initMap(rewardId){
  124. 	var result = "";
  125. 	if(rewardId){
  126. 		//5元话费
  127. 		if(rewardId=="22516eb6d4ff41e7ac81169d9dacceca"){
  128. 			return "2";
  129. 		//500M流量
  130. 		}else if(rewardId=="9d50be6cf17646d78bcc7292ce15a0fb"){
  131. 			return "1";
  132. 		//50元电子卷
  133. 		}else if(rewardId=="e6d113bdd9bb4782ad6855b1201b9955"){
  134. 			return "3";
  135. 		//免单
  136. 		}else if(rewardId=="793e464bfbf948fb9e93d51cfd15e670"){
  137. 			return "4";
  138. 		//1000个积分
  139. 		}else if(rewardId=="22c7707d5c2542ea832a877fc61047e1"){
  140. 			return "5";
  141. 		}else if(rewardId=="-1"){
  142. 			return "1";
  143. 		}
  144. 	}else{
  145. 		return result;
  146. 	}
  147. }
系统还引用了coupon对象；js文件如下：
开始方法：coupon 中的playGame()方法；这里可以发送ajax请求；同时调用的是StartGame();方法【转盘开始转动】
在发送请求的时候；就需要查询中奖结果；然后设置stopIndex值；最多转动3全将会停止，如果转盘一直转动，那表示
stopIndex的值没有在转盘上有对应关系；
停止： coupon.showAlert(); showAlert方法，该返回中奖信息；根据转盘的对应关系；显示奖品信息即可；中奖短信；
在这个时候进行下发；
  1. var coupon = (function($,data){
  2. 	var _default = {
  3. 			basePath:'',
  4. 			optName:'',
  5. 			channel:'weixin',
  6. 			phone:'',
  7. 			openid:'',
  8. 			playTime:''
  9. 	};
  10. 	
  11. 	/**
  12. 	 * 领取方法调用
  13. 	 * */
  14. 	var getCoupon = function(data){
  15. 		$(".couponGet").on("click",function(){
  16. 			var curClick = $(this);
  17. 			var couponType = curClick.attr("data-value");
  18. 			//20元可以直接领取
  19. 			if(couponType=="VOUCHER_20151111_20"){
  20. 				$.ajax({
  21. 					type:'post',
  22. 					url:_default.basePath+'activity/doub11Shop_saveCoupon',
  23. 					data:{
  24. 						"activityCode": couponType
  25. 					},
  26. 					dataType: "text",
  27. 					success:function(data){
  28. 						if(data == "LOGIN"){
  29. 		  		    		window.location.href = "http://wap.nx.10086.cn/wap_emall/activity/doub11Shop_wapDoub11Index";
  30. 		  		    	}else if(data == "1"){
  31. 		  		    		 $('#modal2').find(".am-modal-bd").html("恭喜您已成功领取20元购机券，赶快看看双11的好货吧！填写订单时购机券将会自动显示。");
  32. 		 	  		    	 $('#modal2').show();
  33. 		 	  		    	setTimeout(function(){
  34. 		                        $('.modal_txt').hide();
  35. 		                    },2500);
  36. 		  		    	}else if(data == "0"){
  37. 		  		    		 $('#modal2').find(".am-modal-bd").html("不要贪心啦！购机券每人限领一次，赶快去看看双11的好货吧！填写订单时购机券将会自动显示。");
  38. 		 	  		    	 $('#modal2').show();
  39. 		 	  		    	setTimeout(function(){
  40. 		                        $('.modal_txt').hide();
  41. 		                    },2500);
  42. 		  		    	}else if(data == "2"){
  43. 		  		    		$('#modal2').find(".am-modal-bd").html("活动已结束!");
  44. 		 	  		    	$('#modal2').show();
  45. 		 	  		    	setTimeout(function(){
  46. 		                        $('.modal_txt').hide();
  47. 		                    },2500);
  48. 		  		    	}else{
  49. 		  		    		 $('#modal2').find(".am-modal-bd").html("领卷失败,请刷新后重试!");
  50. 		 	  		    	 $('#modal2').show();
  51. 		 	  		    	setTimeout(function(){
  52. 		                        $('.modal_txt').hide();
  53. 		                    },2500);
  54. 		  		    	}
  55. 					}
  56. 				});
  57. 			}else{
  58. 				alert("分享后可以使用！");
  59. 			}
  60. 		
  61. 		});
  62. 	};
  63. 	/**
  64. 	 * 所有按钮的统一监听流程
  65. 	 * */
  66. 	var buttonProcess = function(data){
  67. 		$(".buttonProcess").on("click",function(){
  68. 			var curClick = $(this);
  69. 			var buttonType = curClick.attr("data-type");
  70. 			var optName = curClick.attr("data-optName");
  71. 			console.log(_default.phone);
  72. 			console.log(_default.openid);
  73. 			//设置提醒的内容--手机号和手机类型
  74. 			if(buttonType == "remind"){
  75. 				var phoneType = curClick.attr("data-phone");
  76. 				console.log(optName);
  77. 				//设置提醒
  78. 				$.ajax({
  79. 					type:'post',
  80. 					url:_default.basePath+'activity/doub11Shop_addSMSAlert',
  81. 					data:{
  82. 						phone:_default.phone,
  83. 					    'phoneType':phoneType,
  84. 					    'optName':optName
  85. 					} ,
  86. 					dataType: "text",
  87. 					success:function(data){
  88. 						if(data=="OK"){
  89. 							$('.modal_txt').text("亲，设置成功啦，我们将在手机抢购活动开始前发短信提醒您，请注意查收！");
  90. 		  		    		$('.modal_txt').show();
  91. 		  		    		setTimeout(function(){
  92. 		                        $('.modal_txt').hide();
  93. 		                    },2500);
  94. 						}else if(data=="ON"){
  95. 							$('.modal_txt').text("提醒失败");
  96. 		  		    		$('.modal_txt').show();
  97. 		  		    		setTimeout(function(){
  98. 		                        $('.modal_txt').hide();
  99. 		                    },2500);
  100. 						}
  101. 					}
  102. 				});
  103. 			//设置领卷的操作
  104. 			}else if(buttonType=="couponGet"){
  105. 				var couponType = curClick.attr("data-value");
  106. 				console.log(couponType);
  107. 				console.log(_default.basePath);
  108. 				//20元可以直接领取
  109. 				if(couponType=="VOUCHER_20151111_20"){
  110. 					$.ajax({
  111. 						type:'post',
  112. 						url:_default.basePath+'activity/doub11Shop_saveCoupon',
  113. 						data:{
  114. 							"activityCode": couponType
  115. 						},
  116. 						dataType: "text",
  117. 						success:function(data){
  118. 							if(data == "LOGIN"){
  119. 			  		    		window.location.href = "http://wap.nx.10086.cn/wap_emall/activity/doub11Shop_wapDoub11Index";
  120. 			  		    	}else if(data == "1"){
  121. 			  		    		$('.modal_txt').text("恭喜您已成功领取20元购机券，赶快看看双11的好货吧！填写订单时购机券将会自动显示。");
  122. 			  		    		$('.modal_txt').show();
  123. 			  		    		setTimeout(function(){
  124. 			                        $('.modal_txt').hide();
  125. 			                    },2500);
  126. 			  		    	}else if(data == "0"){
  127. 			  		    		$('.modal_txt').text("不要贪心啦！购机券每人限领一次，赶快去看看双11的好货吧！填写订单时购机券将会自动显示。");
  128. 			  		    		$('.modal_txt').show();
  129. 			  		    		setTimeout(function(){
  130. 			                        $('.modal_txt').hide();
  131. 			                    },2500);
  132. 			  		    	}else if(data == "2"){
  133. 			  		    		$('.modal_txt').text("活动已结束!");
  134. 			  		    		$('.modal_txt').show();
  135. 			  		    		setTimeout(function(){
  136. 			                        $('.modal_txt').hide();
  137. 			                    },2500);
  138. 			  		    	}else{
  139. 			  		    		$('.modal_txt').text("领卷失败,请刷新后重试!");
  140. 			  		    		$('.modal_txt').show();
  141. 			  		    		setTimeout(function(){
  142. 			                        $('.modal_txt').hide();
  143. 			                    },2500);
  144. 			  		    	}
  145. 						}
  146. 					});
  147. 				}else{
  148. 					$.ajax({
  149. 						type:'post',
  150. 						url:_default.basePath+'activity/doub11Shop_checkVoucher',
  151. 						data: {
  152. 							"activityCode": couponType,
  153. 							"phone":_default.phone,
  154. 						},
  155. 						dataType: "text",
  156. 						success:function(data){
  157. 							if(data == "LOGIN"){
  158. 			  		    		window.location.href = "http://wap.nx.10086.cn/wap_emall/activity/doub11Shop_wapDoub11Index";
  159. 			  		    	}else if(data == "OK"){
  160. 			  		    		$('.modal_txt').text("不要贪心啦！购机券每人限领一次，赶快去看看双11的好货吧！填写订单时购机券将会自动显示。");
  161. 			  		    		$('.modal_txt').show();
  162. 			  		    		setTimeout(function(){
  163. 			                        $('.modal_txt').hide();
  164. 			                    },2500);
  165. 			  		    		$("#isUsed").val("ok");
  166. 			  		    	}else{
  167. 			  		    		$('.modal_bg').show();
  168. 			                    $('.modal_share').show();
  169. 			  		    		
  170. 			  		    	}
  171. 						}
  172. 					});
  173. 				}
  174. 			}
  175. 			
  176. 		});
  177. 	}
  178. 	
  179. 	/**
  180. 	 * 统计pv uv等相关操作
  181. 	 * */
  182. 	var totalClick=function(data){
  183. 		$(".recordData").on("click",function(){
  184. 			var curClick = $(this);
  185. 			var optName = curClick.attr("data-optName");
  186. 			console.log(optName);
  187. 			$.ajax({
  188. 				type:'post',
  189. 				url:_default.basePath+"activity/doub11Shop_saveRecord",
  190. 				data:{
  191. 					optName:optName
  192. 				} ,
  193. 				dataType: "text",
  194. 				success:function(){
  195. 					
  196. 				}
  197. 			});
  198. 		});
  199. 		
  200. 	}
  201. 	/**
  202. 	 * 设置提醒
  203. 	 * */
  204. 	var remind = function(data){
  205. 		$(".remind").on("click",function(){
  206. 			var curClick = $(this);
  207. 			$.ajax({
  208. 				type:'post',
  209. 				url:_default.basePath+'activity/doub11Shop_addSMSAlert',
  210. 				data:{
  211. 					phone:_default.phone
  212. 				} ,
  213. 				dataType: "text",
  214. 				success:function(data){
  215. 					if(data=="OK"){
  216. 						$('.modal_txt').text("亲，设置成功啦，我们将在手机抢购活动开始前发短信提醒您，请注意查收！");
  217. 	  		    		$('.modal_txt').show();
  218. 	  		    		setTimeout(function(){
  219. 	                        $('.modal_txt').hide();
  220. 	                    },2500);
  221. 					}else if(data=="ON"){
  222. 						$('.modal_txt').text("提醒失败");
  223. 	  		    		$('.modal_txt').show();
  224. 	  		    		setTimeout(function(){
  225. 	                        $('.modal_txt').hide();
  226. 	                    },2500);
  227. 					}
  228. 				}
  229. 			});
  230. 		});
  231. 	}
  232. 	var playGame=function(data){
  233. 		$(".playGame").on("click",function(){
  234. 			
  235. 			console.log(_default.phone);
  236. 			
  237. 			
  238. 			//页面减少抽奖次数
  239. 			var payTimeStr = $(".payTime").eq(0).text();
  240. 			var payTime = parseInt(payTimeStr) - 1;
  241. 			if(parseInt(payTimeStr) <= 0){
  242. 				alert("您没有抽奖机会哦~");
  243. 				return ;
  244. 			}
  245. 			
  246. 			$(".payTime").text("");
  247. 			$(".payTime").text(payTime);
  248. 			
  249. 			$.ajax({
  250. 				type:'post',
  251. 				url:_default.basePath+"activity/doub11Shop_getDialResult",
  252. 				data:{
  253. 					phone:_default.phone
  254. 				},
  255. 				dataType: "text",
  256. 				success:function(data){
  257. 					var playResult  = $.parseJSON(data);
  258. 					console.log(playResult);
  259. 					stopIndex =playResult.reward;
  260. 					console.log(stopIndex);
  261. 					//中奖了
  262. 					if(playResult.reward!='0'){
  263. 						$("#cj_tcN").css("background","url("+_default.basePath+"resources/activities/doub11Shop/images/cj_tc01.png"+")");
  264. 					}else{
  265. 						$("#cj_tcN").css("background","url("+_default.basePath+"resources/activities/doub11Shop/images/cj_tc02.png"+")");
  266. 					}
  267. 					var centent = playResult.rewardName;
  268. 					if(centent.indexOf("免单")>-1){
  269. 		    			content = '亲！恭喜您获得'+centent+'，稍后我们将有专人与您联系领奖事项。';
  270. 		    		}else{
  271. 		    			content = '亲！恭喜您获得'+centent+'，奖品将在订单成功签收后的10个工作日内返还。';
  272. 		    		}
  273. 					$(".playContent").text(playResult.rewardName);
  274. 					console.log(playResult.rewardName);
  275. 					StartGame(stopIndex);
  276. 				}
  277. 			});
  278. 		});
  279. 		//再玩一次内容
  280. 		$(".playAgain").on("click",function(){
  281. 			hideAlert();
  282. 		});
  283. 	}
  284. 	//显示重讲
  285.    function showAlert(){
  286.         setTimeout(function(){
  287.         	initPlayTime();
  288.         	drawSMSAlert();
  289.         	$("#lean_overlay").show();
  290.         	$("#cj_tcN").show();
  291.         },1000);  
  292.     	
  293.     }
  294.     function hideAlert(){
  295.        	 $("#cj_tcN").hide();
  296.        	 $("#lean_overlay").hide();
  297.     }
  298.     function drawSMSAlert(){
  299.     	$.ajax({
  300. 			type:'post',
  301. 			url:_default.basePath +"activity/doub11Shop_drawSMSAlert",
  302. 			data:{
  303. 				phone:_default.phone
  304. 			} ,
  305. 			dataType: "text",
  306. 			success:function(data){
  307. 				console.log(data);
  308. 			}
  309. 		});
  310.     }
  311.     function initPlayTime(){
  312.     	//查询用户查询抽奖次数
  313.     	$.ajax({
  314. 			type:'post',
  315. 			url:_default.basePath +"activity/doub11Shop_queryUserPlayTime",
  316. 			data:{
  317. 				phone:_default.phone
  318. 			} ,
  319. 			dataType: "text",
  320. 			success:function(data){
  321. 				console.log("中奖内容"+data);
  322. 				var result = $.parseJSON(data);
  323. 				_default.playTime = result.totalCount;
  324. 				$(".payTime").text(result.totalCount);
  325. 				
  326. 				
  327. 				//中奖了
  328. 				if(data!="1"){//background-size: 300px;
  329. 					$("#cj_tcN").css({"background":"url("+_default.basePath+"activities/doub11Shop/images/cj_tc01.png"+")","width":"300px;","height":"216px","background-size":"300px"});
  330. 				}else{
  331. 					$("#cj_tcN").css({"background":"url("+_default.basePath+"activities/doub11Shop/images/cj_tc02.png"+")","width":"300px;","height":"216px","background-size":"300px"});
  332. 				}
  333. 			}
  334. 		});
  335.     }
  336. 	/**
  337. 	 * 初始化参数
  338. 	 * */
  339. 	function initDafaultValue(data){
  340. 		_default.basePath = data.basePath;
  341. 		_default.phone  = data.phone;
  342. 		_default.openid = data.openid;
  343. 		console.log(data);
  344. 		$(".da_btnclose").on("click",function(){
  345. 			hideAlert();
  346. 		});
  347. 		initPlayTime();
  348. 		
  349. 	}
  350. 	/**
  351. 	 * 绑定相关对象
  352. 	 * */
  353. 	return {
  354. 		getCoupon:getCoupon,
  355. 		initDafaultValue:initDafaultValue,
  356. 		totalClick:totalClick,
  357. 		remind:remind,
  358. 		buttonProcess:buttonProcess,
  359. 		playGame:playGame,
  360. 		showAlert:showAlert,
  361. 		hideAlert:hideAlert
  362. 	}
  363. }) (jQuery);







posted @ 2016-02-23 17:52  thero  阅读(375)  评论(0)  编辑  收藏  举报