roulette

功能描述

  1. 轮盘抽检功能

依赖的模块

  1. 无依赖模块，纯原生JS

快速使用

  1. 以下参数id，resultTo，data为必传，其他选传（下方传递参数为默认值）
  3. //容器
  4. <div id="roulette"></div>
  6. var demo = new roulette({
  7.     id: "roulette",//容器id
  8.     data: [
  9.         //奖项id，奖项名称，奖项价值或其他描述信息
  10.         {id: 1, name: '奖品奖品奖品1', info: '$10'}, 
  11.         {id: 2, name: '奖品2', info: '$10'},
  12.         {id: 3, name: '奖品3', info: '$10'},
  13.         {id: 4, name: '奖品4', info: '$10'}, 
  14.         {id: 5, name: '奖品5', info: '$10'}, 
  15.         {id: 6, name: '奖品6', info: '$10'}
  16.     ],
  17.     baseColor: '#FF9933',//主色调-圆环颜色
  18.     ringHighlightColor: "#FFC55F",//圆环高亮部分颜色
  19.     ringWidth: 20,//圆环宽度
  20.     padding: 10,//奖品名称信息容器的padding
  21.     panColors: ['#ffffa1', '#ffeda4', '#ffdb91'],//奖品信息的颜色值，奖品数量为颜色值length的整数倍为最佳，例如设置8个奖项，可以设置2、4、8中颜色值
  22.     resultTo: function () {
  23.         //此方法用于动态从后端获取抽奖结果，并使轮盘滚动到该结果，无论结果多少轮盘至少转动10周
  24.         //this.scrollToIndex(礼品结果数组索引)
  25.         this.scrollToIndex(1);
  26.     },
  27.      end: function (res) {
  28.          // 这里是轮盘停止时的回调，返回设定的抽奖结果索引
  29.          console.log(res)
  30.      }
  31. })

特别说明

  1. 如有疑问请邮件Nelson_Lee@outlook.com