vue中超市秒杀时间倒计时
需要的格式为跳动的倒计时没有gif版,凑合看看。代码1.template部分<button @click="disCount">秒杀倒计时跳动{{count}}</button>2.data()//定义一个最后要展示的内容为空count: ""3.methods中写入:disCount () {let overtime = "2021-10-28 14:00:50"; //
·
需要的格式为跳动的倒计时
没有gif版,凑合看看。
代码
1.template部分
<button @click="disCount">秒杀倒计时跳动{{count}}</button>
2.data()
//定义一个最后要展示的内容为空
count: ""
3.methods中写入:
disCount () {
let overtime = "2021-10-28 14:00:50"; //结束时间
var timer = setInterval(() => {
var offset = Math.floor((Date.parse(overtime) - Date.now()) / 1000);
console.log('offset', offset)
if (offset <= 0) {
clearInterval(timer);
this.count = "00:00:00";
return false;
}
var secTime = offset % 60; // %意思为取余数
console.log('ccc', secTime)
var minuTime = Math.floor(offset / 60) % 60;
var hourTime = Math.floor(offset / 60 / 60) % 24;
var day = Math.floor(offset / 60 / 60 / 24);
// 补0操作
secTime = (secTime < 10 ? '0' : '') + secTime;
minuTime = (minuTime < 10 ? '0' : '') + minuTime;
hourTime = (hourTime < 10 ? '0' : '') + hourTime;
//拼接时间格式
this.count = day + '天' + hourTime + '时' + minuTime + '分' + secTime + '秒';
}, 1000)
}
更多推荐
已为社区贡献4条内容
所有评论(0)