适合Vue/小程序/Angular/React 的老虎机抽奖系统

2020-06-06 23:50:26 其它

使用 javascript 编写的兼容适合 Vue/小程序/Angular/React 的老虎机抽奖系统,只需要小改界面即可用于各种场景,推荐。

甚至可以指定结果的抽奖,前端指定的抽奖结果,当前,数据需要后台传过来的。

**注意:本文只提供演示代码进行演示,代码仅作为开发人员学术讨论,本站不涉及到任何抽奖及博彩等赌博违法操作。
**

完整示例请下载试试吧。

部分代码示例:

// 每一个奖品标签的高度,根据实际高度变化(注意 margin 和 padding)
const itemHeight = 190;

this.slotsOpts = this.slots.map((data, i) => {
  let choice = this.slotsIndex[i];// 中奖了,根据序列返回结果
  if (this.slotsIndex[0] === -1) {
    choice = Math.floor(Math.random() * data.items.length);// 没中奖,随机返回结果
  }
  // 初始化定义动画动作结果
  const opts = {
    finalPos: choice * itemHeight,// 最终转动位置
    startOffset: 8000 + Math.random() * 500 + i * 1600,// 影响转的圈数
    height: data.items.length * itemHeight,// 总长度
    duration: 10000 + i * 7000, // 持续时间,每一个奖品持续8秒,以此累加
    isFinished: false// 是否完成了
  };
  return opts;
});

评论