传入一个时间段(开始时间,结束时间),与系统时间比较,即可知道抢购状态(1、距离开始倒计时 2、抢购中倒计时 3、抢购结束),从而控制按钮
**
注意:博主代码中的系统时间为客户端时间,真正的需要倒计时抢购时,是需要获取服务器的时间的,不然用户客户端时间与服务器时间不同步时,可能会造成误抢或者到时间不能抢购…等等原因都是会出现的。
**
假设有这样一个需求:
某一商品有设定限时抢购时间段,在某个时间段内才能进行抢购,我需要倒计时距离商品开抢的时间(此时不能抢购),当时间为开抢时间是,我需要倒计时为抢购中的时间(此时可以抢购),当抢购结束后,我需要停止倒计时(此时不能抢购)
例如:
系统时间 (2019-08-03 12:11:00)
- 传入两个值 2019-08-03 12:12:00 ,2019-08-03 12:12:30 ,‘
- 会根据传入的时间段与系统时间进行比较,判断是 距离抢购倒计时、抢购中倒计时、抢购结束 这三种状态进行显示
那么会有如下的效果:
这是距离商品开抢的倒计时
这是商品抢购中的倒计时
这是商品倒计时结束的
这样我们就可以轻易的知道是否能进行抢购啦~
自定义组件的代码:
// 这是自定义组件中js的代码
var util = require("../../utils/util.js")
/**
* 倒计时抢购自定义组件
* (该组件传入两个时间值,即可显示抢购状态)
* 抢购状态:抢购未开始倒计时、抢购中倒计时、抢购结束
*/
Component({
data: {
showTime: "", //显示时间
showTxt: "", //显示内容
rushState: false, //抢购状态
startDate: "2019-08-03 12:32:00",
endDate: "2019-08-03 12:32:30",
},
ready() {
//开始时间必须要小于结束时间才去执行
if (this.data.startDate < this.data.endDate) {
this.countDown() //执行倒计时
}
},
detached() {
clearInterval(this.countDown()) // 页面被被销毁的时候,清除定时器
},
methods: {
/**
* 倒计时
*/
countDown: function() {
var interval = setInterval(function() {
//判断抢购开始时间小于系统时间时,取抢购结束时间进行倒计时,否则取抢购开始时间倒计时
var totalSecond = Date.parse(this.data.startDate <= util.formatTime(new Date) ? this.data.endDate : this.data.startDate) / 1000 - Date.parse(new Date()) / 1000;
var second = totalSecond
// 计算天
var day = Math.floor(second / 3600 / 24)
day = this.timeFormat(day)
// 计算小时
var hr = Math.floor((second - day * 3600 * 24) / 3600)
hr = this.timeFormat(hr)
// 计算分钟
var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60)
min = this.timeFormat(min)
// 计算秒
var sec = second - day * 3600 * 24 - hr * 3600 - min * 60
sec = this.timeFormat(sec)
totalSecond--;
//开始时间大于系统时间,说明在-抢购未开始倒计时
if (this.data.startDate > util.formatTime(new Date)) {
this.setData({
showTime: day + "天" + hr + "时" + min + "分" + sec + "秒",
showTxt: "限时抢购倒计时:",
})
//开始时间小于等于系统时间,且系统时间小于结束时间 说明在-抢购中倒计时
} else if (this.data.startDate <= util.formatTime(new Date) && util.formatTime(new Date) < this.data.endDate) {
this.setData({
showTime: day + "天" + hr + "时" + min + "分" + sec + "秒",
showTxt: "限时抢购中:",
rushState: true
})
//结束时间小于等于系统时间时,说明结束了 (后面还带了一个条件 totalSecond < 0,是防止开始时间倒计时结束之后不往下继续执行抢购中的倒计时)
} else if (this.data.endDate <= util.formatTime(new Date) && totalSecond < 0) {
clearInterval(interval); //清除定时器
this.setData({
showTime: "",
showTxt: "限时抢购已结束!",
rushState: false
});
}
}.bind(this), 1000); //每隔一秒执行
},
//处理小于10以下的前面补0
timeFormat(param) {
return param < 10 ? '0' + param : param;
},
}
})
//这是自定义组件中wxml的代码
<!--倒计时抢购-->
<view class="count-down">
<view class="count-down-txt">{{showTxt}}</view>
<view class="count-down-time" hidden="{{showTime==''?true:false}}">{{showTime}}</view>
</view>
<button disabled="{{rushState?false:true}}" style="width:100%;" size="mini">立即抢购</button>
//这是自定义组件中wxss的代码
.count-down {
display: flex;
justify-content: center;
align-items: center;
background: rgb(197, 148, 148);
}
.count-down-txt {
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
line-height: 50rpx;
}
.count-down-time {
font-size: 25rpx;
padding: 10rpx;
color: rgb(202, 0, 0);
background-color: rgb(223, 190, 160);
border-radius: 20rpx;
}
引用自定义组件的代码
//这是引用自定义组件的wxml
<!--倒计时 -->
<count></count>
//这是引用自定义组件的json
{
"usingComponents": {
"count": "/components/time/index"
}
}
怕对一些刚入门的小白造成困扰,最后贴张目录图吧
如果需要测试代码的话,别忘了util.js里面的 “/” 改为 “-” 哦, 时间需要格式需要一致
最后说明,第一次写博客,记录一下自己遇到的一些问题,代码中有什么不对的地方,希望老哥们可以帮我指出,我会加以改正。