H5Lotteryraw

功能描述

使用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格式。若需自行编写参数,请修改对应方法调用的参数名称。
页面加载完毕后,方可绘制大转盘。
是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10