<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>倒计时应用_v2</title>
</head>
<body>
<div id="app">
<div>剩余时间：<span>{{remainingTime}}</span> </div>
</div>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
remainingTime: "",
}
},
methods: {
// 倒计时 code star------------------------------
// 格式化总秒数
formatTime(sections) {
var d = parseInt(sections / 60 / 60 / 24),
h = parseInt(sections / 60 / 60 % 24) < 10 ? `0${parseInt(sections / 60 / 60 % 24)}` : `${parseInt(sections / 60 / 60 % 24)}`,
m = parseInt(sections / 60 % 60) < 10 ? `0${parseInt(sections / 60 % 60)}` : `${parseInt(sections / 60 % 60)}`,
s = parseInt(sections % 60) < 10 ? `0${parseInt(sections % 60)}` : `${parseInt(sections % 60)}`;
return {
d,
h,
m,
s
}
},
//倒计时封装函数 startTime:开始时间，endTime：截止时间
getCountdown(startTimeStamp, endTimeStamp) {
endTimeStamp && endTimeStamp.toString().length == 13 ? endTimeStamp = endTimeStamp : endTimeStamp = endTimeStamp * 1000; //时间戳设置成13位数
console.log("截止时间：" + new Date(parseInt(endTimeStamp)).toLocaleString())
setInterval((startTimeStamp) => {
var startTimeStamp = Date.now(); //输出13位数时间戳
var remainingSeconds = parseInt((endTimeStamp - startTimeStamp) / 1000); //输出剩余总秒数
if (startTimeStamp < endTimeStamp) {
var remainingTimeObj = this.formatTime(remainingSeconds); //获取剩余时间对象
console.log(remainingTimeObj);
// 更新试图
this.remainingTime = `${remainingTimeObj.d} 天 ${remainingTimeObj.h}:${remainingTimeObj.m}:${remainingTimeObj.s}`;
} else {
this.remainingTime = "已过截止时间！";
console.log("已过截止时间！")
}
}, 1000);
}
// 倒计时 code end------------------------------
},
created() {
this.getCountdown(Date.now(), "1739161680")
},
})
</script>
</html>
