使用jQ写的可变奖励打转盘。
可调用getWheelInfo()方法,请求后端奖品,中奖概率,动态实现大转盘内容。
也可前端编写固定值奖品,及随机值中奖概率使用。
使用了jquery.js和jqueryRotate.js。
因需展示,插件内默认使用的是方法一。
[参考](https://github.com/MiuMiu-S/Draw-a-iottery)。。
不请求后端,直接前端编写固定值奖品,及随机值中奖概率使用。 赋初值,奖品图标可为空。
turnWheel.reward = [{name : '奖品名称', image : '奖品图标', color : '奖品区域背景色'},{……}]; //json数据
然后直接调用 jquery.js,jQueryRotate.js和zknight_h5screenshot_common.js文件即可。
首先注释
//$(function(){
// initImageAndReturn();
//});
//window.onload = function() {
// drawWheelCanvas();
//};
然后初始化大转盘中奖信息。
function getWheelInfo(){
//简易封装的apicloud的ajax方法
ajaxPost("", null, function(ret, err){
turnWheel.reward = ret.data; //获取奖品信息
//初始化奖品图片
initImageAndReturn();
//初始化大转盘,需页面信息加载完毕后调用
window.onload = function() {
drawWheelCanvas();
};
});
}
最后编写抽奖按钮: onPointer()抽奖按钮方法,放开注释,自行请求编写后端中奖奖品,及后续逻辑。
function onPointer(){
// 正在转动,直接返回
if(turnWheel.bRotate){
return
}
turnWheel.bRotate = !turnWheel.bRotate;
var count = turnWheel.reward.length;
//若是后端请求,则注释 start
// 开始抽奖
//rotateFunc(4, turnWheel.reward[4].name,count);
//end
//后端请求,放开注释,并编写相应方法
// 从服务器获取用户真实的获奖信息(对应的获奖序号)
ajaxPost("", {
values : {
}
}, function(ret, err){
//index 奖品下标,即奖品文字描述的下标
rotateFunc(ret.index, turnWheel.rewardNames[ret.index],count);
});
}
请求方式后端信息的方式,根据各自需求使用及编写即可。我这里用的时apicloud的ajax请求方式。
需支持canvas。
请严格按照本人编写的初始参数turnWheel.reward中的json格式。若需自行编写参数,请修改对应方法调用的参数名称。
页面加载完毕后,方可绘制大转盘。