九宫格抽奖停止位置的设置
2016-05-31 23:10
411 查看
控制九宫格抽奖停止
网上有很多文章介绍九宫格抽奖,最近在做一个活动,正好用到了九宫格抽奖。网上的文章中都提供了比较完整的js和html,只需要将js、html复制下来,添加需要的jQuery的引用(下载很简单),放到环境中,几乎都能跑起来。但在开发中,发现一个问题,网上的js提供了九宫格旋转的控制代码,同时也有一个随机数的生产,来达到随机抽奖的效果。而真正在开发中,这个随机数它是交给使用者(开发人员)来控制的,也就是说,我们先生产一个随机数,将我们自己生成的随机数与我们自己设置的奖品对应好,再将我们的随机数传给它,进而控制九宫格的停止位置。
在使用中,只需做两点设置:(完整代码请去到jquery——九宫格大转盘抽奖)
1.注释部分代码(注掉,让其失效)
} else if (lottery.times == lottery.cycle) { // var index = Math.random() * (lottery.count) | 0; // lottery.prize = index; } else {</span>2.设置 lottery.prize的值
// 中奖,奖品对应 var prize = -1; var content = ""; if (data.rewardid == "340") { lottery.prize = 0; prize = 0; content = "礼物A"; } else if (data.rewardid == "341") { lottery.prize = 1; prize = 1; content = "礼物B"; /* ... */ } else if (data.rewardid == "342") { lottery.prize = 2; prize = 2; content = "礼物C"; /* ... */ } else if (data.rewardid == "343") { lottery.prize = 3; prize = 3; content = "礼物D"; /* ... */ } else if (data.rewardid == "344") { lottery.prize = 4; prize = 4; content = "礼物E"; /* ... */ } else if (data.rewardid == "345") { lottery.prize = 5; prize = 5; content = "礼物F"; } else if (data.rewardid == "346") { lottery.prize = 6; prize = 6; content = "礼物G"; /* ... */ } else if (data.rewardid == "347") { lottery.prize = 7; prize = 7; content = "礼物H"; /* ... */ } // 设置 转动节奏 lottery.speed = 100; // 调用 转动效果 roll(); // 抽奖按钮恢复可用状态 click = true; var field = "恭喜您!中了"+content+"大奖!"; return false;</span>
这样就能实现抽奖控制了。
在这里,我有一个问题,就是,我曾试着往roll()方法中传递参数,这个参数的作用就是用于控制停止位置的,但失败了。从语法逻辑上,感觉是行得通,实践未达到效果。具体修改两个位置:
(一):
// 设置 转动节奏 lottery.speed = 100; var stopPoint = prize; roll(stopPoint); // 抽奖按钮恢复可用状态 click = true; var field = "恭喜您!中了"+content+"大奖!"; return false;</span>(二)
function roll(stopPoint){ //…… } else if (lottery.times == lottery.cycle) { //var index = Math.random() * (lottery.count) | 0; lottery.prize = stopPoint; } else { //…… }</span>结果是:通过传参法,无法实现控制,直接没反应。有大神路过的,请指点一二。谢谢!
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码