完整代码
已知下单时间参数为creatTime,样式xxxx-xx-xx xx:xx:xx ,需要30分钟动态倒计时
<template>
<div id="main">
<div>下单时间为{{createTime}}</div>
<div>下单时间总毫秒为{{createSecond}}</div>
<div>当前时间为{{nowTime}}</div>
<div>当前时间总毫秒为{{nowSecond}}</div>
<div>剩余时间总毫秒为{{timeSecond}}</div>
<div>普通30秒倒计时:{{time}}</div>
<div>下单30秒倒计时:{{Minute}}:{{Second}}</div>
</div>
</template>
export default {
data() {
return {
timer:'',// 定时器名称
time:30,
createTime:"2023-4-17 10:40:00",// 订单创建时间
createSecond:"",// 创建订单总毫秒
nowTime:"",// 当前时间
nowSecond:"",// 当前时间总毫秒
timeSecond:"",// 剩余时间总毫秒
Minute:"00",
Second:"00"
}
},
methods: {
// 定时器
getTime(){
this.timer = setInterval(()=>{
this.time --; // 每秒-1
if(this.time == 0){ // 时间为0,销毁
clearInterval(this.timer)
}
},1000)
this.timer2 = setInterval(()=>{
this.countDown();
if(this.timeSecond == 0){ // 时间为0,销毁
clearInterval(this.timer2)
}
},1000)
},
// 格式化时间
changeTime(date){
var Y = date.getFullYear();
var M = date.getMonth()+1;
var D = date.getDate();
var h = date.getHours();
h = h <10 ? '0' + h : h; // Hours是否为个位数,不是则在前面加0,如1:11:11变为01:11:11
var m = date.getMinutes();
m = m <10 ? '0' + m : m; // 同上
var s = date.getSeconds();
s = s <10 ? '0' + s : s; // 同上
return (Y +'-'+ M +'-'+ D + ' ' + h +':'+ m +':'+ s); // 得到格式化时间
},
// 计算剩余时间
countDown(){
var date = new Date();// 当前标准时间
this.nowTime = this.changeTime(date) // 格式化时间
var nowSecond = +new Date() // 返回当前时间总毫秒
this.nowSecond = nowSecond
var createSecond = +new Date(this.createTime)// 返回创建订单时间总毫秒
this.createSecond = createSecond
var dao = 30*60*1000 //30分钟的毫秒数
var end = createSecond + dao // 创建订单30分钟后的毫秒数
var time = parseInt((end - nowSecond)/1000) // 剩余时间的总秒数
this.timeSecond = time
var D = parseInt(time/60/60/24) // 天数
D = D <10 ? '0' + D : D
var h = parseInt(time/60/60/60/24%24) // 小时
h = h <10 ? '0' + h : h
var m = parseInt(time/60%60) // 分
m = m <10 ? '0' + m : m;
var s = parseInt(time % 60);//秒
s = s <10 ? '0' + s : s;
if(time <= 0){ // 小于0,永远为 00:00
this.$set(this,'Minute','00')
this.$set(this,'Second','00')
}else{
console.log('timer')
this.$set(this,'Minute',m)
this.$set(this,'Second',s)
}
}
},
// 关闭页面前销毁
beforeDestroy() {
clearInterval(this.timer)
clearInterval(this.timer2)
},
mounted() {
this.getTime();
}
}
时间日期js语法
获取当前时间
new Date()括号中没有参数,返回当前时间
new Date()括号中有参数,返回参数时间
var date = new Date();
var date1 = new Date('2022-10-1 10:9:10');
console.log(date); //运行结果 Wed Feb 08 2023 10:28:13 GMT+0800 (中国标准时间)
console.log(date1); //运行结果 Sat Oct 01 2022 10:09:10 GMT+0800 (中国标准时间)
格式化时间
由于月份为(0-11)需要.getMonth()+1
var date = new Date();
console.log(date); //运行结果 Wed Feb 08 2023 10:28:13 GMT+0800 (中国标准时间)
console.log(date.getFullYear()); //运行结果2023
console.log(date.getMonth()+1); //运行结果1
console.log(date.getMonth()+1); //运行结果2
将时间格式化为xxxx-xx-xx xx:xx:xx的方法
var date = new Date();
var Y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
h = h <10 ? '0' + h : h;
var m = date.getMinutes();
m = m <10 ? '0' + m : m;
var s = date.getSeconds();
s = s <10 ? '0' + s : s;
console.log(Y +'-'+ m +'-'+ d + ' ' + h +':'+ m +':'+ s); // 得到2023-17-8 11:17:01
计算当前时间到目标时间的剩余时间
+new Date()当前的时间戳
get_daoTime(){
console.log(this.conutDown('2023-2-8 12:22:00','2023-2-8 12:00:00'))
// 18:53
},
conutDown(time){
var nowTime = +new Date();//返回当前时间总毫秒数
var inputTime = +new Date(time);//返回输入时间毫秒数
var times = (inputTime - nowTime)/1000;//剩余时间总秒数
var d = parseInt(times / 60 / 60 /24);//天
d = d <10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 / 24 %24);//时
h = h <10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);//分
m = m <10 ? '0' + m : m;
var s = parseInt(times % 60);//秒
s = s <10 ? '0' + s : s;
return m + ":" + s
},