微信小程序 转盘抽奖 倒计时 整点

xml:

 <view id="luckdraw_box">
    <view id="luckdraw_back">
      <image style='transform:rotate({{ change_angle}}deg)' mode="scaleToFill" src="https://upload-images.jianshu.io/upload_images/9791228-3a7f7860c6a40237.png?imageMogr2/auto-orient/strip|imageView2/2/w/531/format/webp"></image>
    </view>
    <view id="luckdraw_pointer" bindtap='luckDrawStart'>
      <image mode="scaleToFill" src="https://upload-images.jianshu.io/upload_images/9791228-8b99dae679bbb1ac.png?imageMogr2/auto-orient/strip|imageView2/2/w/174/format/webp"></image>
    </view>
  </view>
  <view class="aa">
    <text>{{day}}天{{hour}}时{{minute}}分{{second}}秒</text>
  </view>
  <view class="aa">
    <scroll-view scroll-x class="scroll-x">
      <view wx:for="{{timeList}}" wx:key="{{index}}" class="view_item" >
        <view class="view_item_time" bindtap="clickItem" data-item="{{item}}">{{item.time}}</view>
        <view class="view_item_hint" bindtap="clickItem" data-item="{{item}}">{{item.hint}}</view>
      </view>
    </scroll-view>
  </view>

wxss:

#luckdraw_box{
  width:531rpx;
   height:531rpx;
   margin:0 auto;
   position:relative;
   margin-top: 100px;
}

#luckdraw_back{
  width: 100%;
  height: 100%;
}   

#luckdraw_back image{
  display: block;
  width: 100%;
  height: 100%;
  transform-origin:center center;
}

#luckdraw_pointer{
    width:174rpx;
    height:228rpx;
    position:absolute;
    left:178.5rpx;
    z-index:999;
    top:132.5rpx;
}

#luckdraw_pointer image{
  display: block;
  width: 100%;
  height: 100%;
}

page{
  background: #060606;
}
.aa{
  background: #fff;
  text-align: center;
  color: darkorange;
}
/***-----------------------*/
.scroll-x{
    white-space:nowrap;
    display:flex;
    background: #333;
}

.view_item{
    display:inline-block;
    padding: 20rpx;
}

.view_item_time{
    width:100rpx;
    height:50rpx;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
    color:#FFFFFF;
    background:#000;
}

.view_item_hint{
    width:100rpx;
    height:50rpx;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.5rem;
    color:#FFFFFF;
    background:#000;
}

/* 隐藏scrollbar */
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

js:

// 上下文对象
var that;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    is_play: false,// 是否在运动中，避免重复启动bug
    available_num: 1,// 可用抽奖的次数，可自定义设置或者接口返回
    start_angle: 0,// 转动开始时初始角度=0位置指向正上方，按顺时针设置，可自定义设置
    base_circle_num: 9,// 基本圈数，就是在转到（最后一圈）结束圈之前必须转够几圈 ，可自定义设置
    low_circle_num: 5,// 在第几圈开始进入减速圈（必须小于等于基本圈数），可自定义设置
    add_angle: 10,// 追加角度，此值越大转动越快，请保证360/add_angle=一个整数，比如1/2/3/4/5/6/8/9/10/12等
    use_speed: 1,// 当前速度，与正常转速值相等
    nor_speed: 1,// 正常转速，在减速圈之前的转速，可自定义设置
    low_speed: 10,// 减速转速，在减速圈的转速，可自定义设置
    end_speed: 20,// 最后转速，在结束圈的转速，可自定义设置
    random_angle: 0,// 中奖角度，也是随机数，也是结束圈停止的角度，这个值采用系统随机或者接口返回
    change_angle: 0,// 变化角度计数，0开始，一圈360度，基本是6圈，那么到结束这个值=6*360+random_angle；同样change_angle/360整除表示走过一整圈
    result_val: "未中奖",// 存放奖项容器，可自定义设置
    Jack_pots: [// 奖项区间 ，360度/奖项个数 ，一圈度数0-360，可自定义设置
     // random_angle是多少，在那个区间里面就是中哪个奖项
      {
        startAngle: 1,
        endAngle: 51,
        val: "1等奖"
      },
      {
        startAngle: 52,
        endAngle: 102,
        val: "2等奖"
      },
      {
        startAngle: 103,
        endAngle: 153,
        val: "3等奖"
      },
      {
        startAngle: 154,
        endAngle: 203,
        val: "4等奖"
      },
      {
        startAngle: 204,
        endAngle: 251,
        val: "5等奖"
      },
      {
        startAngle: 252,
        endAngle: 307,
        val: "6等奖"
      },
      {
        startAngle: 307,
        endAngle: 360,
        val: "未中奖"
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
    that.countDown('2021-02-26 17:30:00');
    that.setData({
      timeList: that.initTimeList(24)
    })
  },
 /**
   * 倒计时
   *
   * @param endTime 结束日期+时间
   * **/
  countDown:function(endTime){
    that.setData({
      timer: setInterval(function(){

        var downTime = parseInt(new Date(endTime.replace(/-/g, "/")).getTime() - new Date().getTime())

        // 倒计时结束
        if(downTime <= 0){
           that.setData({
             day: '00',
             hour: '00',
             minute: '00',
             second: '00'
           })
           that.luckDrawStart()
           clearInterval(that.data.timer);
           return;
        }

        var d = parseInt(downTime / 1000 / 3600 / 24);
        var h = parseInt(downTime / 1000 / 3600 % 24);
        var m = parseInt(downTime / 1000 / 60 % 60);
        var s = parseInt(downTime / 1000 % 60);

        d < 10 ? d = '0' + d : d;
        h < 10 ? h = '0' + h : h;
        m < 10 ? m = '0' + m : m;
        s < 10 ? s = '0' + s : s;

        that.setData({
          day: d,
          hour: h,
          minute: m,
          second: s
        })

      }, 1000)
    })
  },
  /**
   * 启动抽奖
   */
  luckDrawStart: function () {
    // 阻止运动中重复点击
    if (!that.data.is_play) {
      // 设置标识在运动中
      that.setData({
        is_play: true
      });
      // 重置参数
      that.luckDrawReset();
      // 几率随机，也可从服务端获取几率
      that.setData({
        random_angle: Math.ceil(Math.random() * 360)
      });
     // 运动函数
      setTimeout(that.luckDrawChange, that.data.use_speed);
    };
  },

  /**
   * 转盘运动
   */
  luckDrawChange: function () {
   // 继续运动
    if (that.data.change_angle >= that.data.base_circle_num * 360 + that.data.random_angle) {// 已经到达结束位置
     // 提示中奖，
      that.getLuckDrawResult();
     // 运动结束设置可用抽奖的次数和激活状态设置可用
      that.luckDrawEndset();
    } else {// 运动
      if (that.data.change_angle < that.data.low_circle_num * 360) {// 正常转速
        // console.log("正常转速")
        that.data.use_speed = that.data.nor_speed
      } else if (that.data.change_angle >= that.data.low_circle_num * 360 && that.data.change_angle <= that.data.base_circle_num * 360) {// 减速圈
        // console.log("减速圈")
        that.data.use_speed = that.data.low_speed
      } else if (that.data.change_angle > that.data.base_circle_num * 360) {// 结束圈
       // console.log("结束圈")
        that.data.use_speed = that.data.end_speed
      }
     // 累加变化计数
      that.setData({
        change_angle: that.data.change_angle + that.data.add_angle >= that.data.base_circle_num * 360 + that.data.random_angle ? that.data.base_circle_num * 360 + that.data.random_angle : that.data.change_angle + that.data.add_angle
      });
      setTimeout(that.luckDrawChange, that.data.use_speed);
    }

  },

  /**
   * 重置参数
   */
  luckDrawReset: function () {
    // 转动开始时首次点亮的位置，可自定义设置
    that.setData({
      start_angle: 0
    });
    // 当前速度，与正常转速值相等
    that.setData({
      use_speed: that.data.nor_speed
    });
    // 中奖索引，也是随机数，也是结束圈停止的位置，这个值采用系统随机或者接口返回
    that.setData({
      random_angle: 0
    });
    // 变化计数，0开始，必须实例有12个奖项，基本是6圈，那么到结束这个值=6*12+random_number；同样change_num/12整除表示走过一整圈
    that.setData({
      change_angle: 0
    });
  },

  /**
   * 获取抽奖结果
   */
  getLuckDrawResult: function () {
    for (var j = 0; j < that.data.Jack_pots.length; j++) {
      if (that.data.random_angle >= that.data.Jack_pots[j].startAngle && that.data.random_angle <= that.data.Jack_pots[j].endAngle) {
        that.setData({
          result_val: that.data.Jack_pots[j].val
        });
        wx.showModal({
          title: '抽奖结果',
          content: that.data.Jack_pots[j].val,
        })
        break;
      };
    };
  },

  /**
   * 更新状态（运动结束设置可用抽奖的次数和激活状态设置可用）
   */
  luckDrawEndset: function () {
    // 是否在运动中，避免重复启动bug
    that.setData({
      is_play: false
    })
    // 可用抽奖的次数，可自定义设置
    that.setData({
      available_num: that.data.available_num - 1
    });
  },
  /**------------------------- */
    /**
   * 时段数组生成
   * @param itemNum 需要的时段数量
   *
   * return 生成的完整数组
  */
 initTimeList:function(itemNum){
  // 基础判断
  if (itemNum <= 0){
    console.log(' Error From initTimeList()：所需时段数不可小于等于零')
    return []
  }

  // 当前时段
  var nowTime = new Date().getHours()

  // 组装数组
  var timeList = []
  for (var t = 0; t < itemNum ; t++){
    t > 9 ? (timeList.push({ 'index': t, 'time': t + ':00', 'hint': (t == nowTime ? '抢购进行中' : (t > nowTime ? '即将开始' : '已开抢')) })) : (timeList.push({ 'index': t, 'time': '0' + t + ":00", 'hint': (t == nowTime ? '抢购进行中' : (t > nowTime ? '即将开始' : '已开抢')) }))
  }
  return timeList
},

/**
 * 时间选择器列表点击监听
 * @param item 被点击的item对象，包含所有信息
*/
clickItem:function(item){
  // 列表点击事件
  console.log(item.currentTarget.dataset.item.index)
}


})