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/04/24