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


})

微信小程序 转盘抽奖 倒计时 整点的更多相关文章

  1. 微信小程序验证码获取倒计时

    wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...

  2. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  3. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  4. 微信小程序实现验证码倒计时效果

    效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...

  5. 微信小程序动态显示项目倒计时效果

    效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...

  6. 微信小程序中的倒计时

    这是我项目中的例子,如果有更好的建议欢迎留言 ,一起学习 //获取时间 var sekillStartTime = resultLis[0].planGroup0.sekillStartTime;// ...

  7. 微信小程序获取验证码倒计时

    getVerificationCode: function() { var that = this; var currentTime = that.data.currentTime; that.set ...

  8. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  9. 微信小程序之倒计时插件 wxTimer

    微信小程序之倒计时插件   wxTimer 介绍: 用于在微信小程序中进行倒计时的组件. 功能: 1.最基础的当然就是倒计时功能了. 2.可以设置倒计时结束后执行的事件. 3.可以设置倒计时执行过程中 ...

随机推荐

  1. 高性能内存图数据库RedisGraph(三)

    这篇文章,我将介绍截止目前,RedisGraph的最新版本(v2.4)对Cypher语言的支持情况. 1.模式(patterns) RedisGraph已支持Cypher中所有的模式. 2.类型(ty ...

  2. zookeeper与eureka比较

    一个分布式系统不可能同时满足C(一致性).A(可用性)和P(分区容错性) zookeeper确保cp 当向注册中心查询服务列表时,我们可以容忍注册中心返回的是几分钟以前的注册信息,但不能接受服务直接d ...

  3. 运行ride.py报错,闪退

    报错信息如下: F:\Python3.8\Scripts>python ride.py<class 'robotide.preferences.configobj.UnreprError' ...

  4. 实时 + 高清 + 超压缩,阿里云视频云发布业内首款 VVC 编码器 Ali266

    基于新一代国际视频编解码标准 H.266/VVC,阿里云视频云近日发布了实时高清编码器 Ali266,有力推动 H.266/VVC 标准应用的落地,真正开启 H.266/VVC 的商用之路,并强力赋能 ...

  5. js学习笔记之公告逐行显示

    $(function(){ var newsListHeight = $(".news-list").height(); //获得内容的高度 var newsConHeight = ...

  6. SuperEdge 高可用云边隧道有哪些特点?

    作者 作者李腾飞,腾讯容器技术研发工程师,腾讯云TKE后台研发,SuperEdge核心开发成员. 背景 在边缘集群中,边缘端和云端为单向网络,云端无法主动连接边缘端,常见的解决方案是边缘端主动和云端( ...

  7. Python - 函数实战

    前言 参考的是慕课网提供的实战,自己编码 http://www.imooc.com/wiki/pythonlesson1/function2.html 什么是模块化程序设计 在进行程序设计时将一个大程 ...

  8. vue 传参动态

    方法一: router/index.js { path: '/src/views/activitiesDetails', name: activitiesDetails, component: act ...

  9. RHCE_DAY07

    文件共享服务FTP介绍 FTP(File Transfet Protocol):文件传输协议 FTP是一种在互联网中基于TCP协议端到端的数据传输协议 基于C/S架构,默认使用20.21号端口 端口2 ...

  10. Windows根据端口号查找对应的进程和服务

    需求 1,我们在Win10安装一些Web服务时,会发现默认端口被占用,比如443端口被占用,808端口被占用,那么如何找出占用这些默认端口的进程和对应的服务呢? 2,系统安装完成后,会有一些应用对外开 ...