首页 > Web开发 > 详细

摇奖-大转盘-js内容

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







摇奖-大转盘-js内容

原文:http://www.cnblogs.com/babyhhcsy/p/331cda7749ff16552653e6f76e502659.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!