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) }
})
