效果图:
首先我们需要对时间戳进行格式化处理,处理成距离现在时间还有多少时分秒,00.00.00,小时.分钟.秒的格式,这里我对该格式转换做了一个简单的封装处理
// 将时间戳转化为时分秒的格式,一般用作倒计时
function intervalTime(endTime) {
// console.log(222)
// var timestamp=new Date().getTime(); //计算当前时间戳
var date1 = (Date.parse(new Date()))/1000;//计算当前时间戳 (毫秒级)
var date2 = endTime; //结束时间
// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
var date3 = (date2- date1)*1000; //时间差的毫秒数
//计算出相差天数
var days = Math.floor(date3 / (24 * 3600 * 1000));
//计算出小时数
var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000));
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000));
//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
// console.log(days + "天 " + hours + "小时 ")
var sun = days*24 + hours;
var min = minutes;
var sec = seconds;
if(sun == 0){
sun = '00';
}else if(sun < 10){
sun = '0'+sun;
}
if(min < 10){
min = '0'+minutes;
}
if(sec < 10){
sec = '0'+seconds;
}
if((days*24 + hours)<= 0 && minutes <= 0 && seconds <= 0){
return '00.00.00'
}else{
return (sun) + "." + min + "." + sec;
}
// return days + "天 " + hours + "小时 "
}
export default intervalTime;
格式转换出自https://blog.csdn.net/qq_40020447/article/details/107835026
并做了相应的改编处理
接下来在需要的地方导入封装的组件,并进行倒计时操作:
import timeHMS from "../../../common/timeHMS.js"
//在data数据源中进行注册
data() {
return {
time:'00.00.00',
timeHMS,
timer:null,//定义计时器,以便全局访问
}
},
onLoad() {
this.timer=setInterval(()=>{
//调用定义的事件,进行倒计时操作,传入需要结束的时间戳
this.countDown(1619317020)
},1000)
},
methods: {
// 定义倒计时
countDown(endtime){
//判断倒计时是否为0,如果为零即可清楚计时器
if(this.timeHMS(endtime) == '00.00.00'){
clearInterval(this.timer)
}
this.time = this.timeHMS(endtime);
}
}