12,812
社区成员
发帖
与我相关
我的任务
分享
前段星期公司需要实现一个倒计时显示面板,原本我以为实现挺简单的,但是过程中却遇到了一些小麻烦,因为记录下来供大家学习
<template>
<div class="main">
<div class="title gray_color">{{ title }}</div>
<div class="timer_info">
<div v-if="showDay" class="day_info">
<div class="timer_num">{{ d }}</div>
<div class="timer_font gray_color">天</div>
</div>
<div class="time_info">
<div class="timer_num">{{ h }}</div>
<div class="timer_font gray_color">小时</div>
</div>
<div class="colon">:</div>
<div class="time_info">
<div class="timer_num">{{ i }}</div>
<div class="timer_font gray_color">分钟</div>
</div>
<div class="colon">:</div>
<div class="time_info">
<div class="timer_num">{{ s }}</div>
<div class="timer_font gray_color">秒</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
showDay: {
type: Boolean,
default: true,
},
day: {
type: Number,
default: 0,
},
hour: {
type: Number,
default: 15,
},
minute: {
type: Number,
default: 20,
},
second: {
type: Number,
default: 10,
},
title: {
type: String,
default: "距离活动倒计时: ",
},
},
data() {
return {
timer: null,
syncFlag: false,
d: "00",
h: "00",
i: "00",
s: "00",
leftTime: 0,
seconds: 0,
};
},
watch: {
day(val) {
this.changeFlag();
},
hour(val) {
this.changeFlag();
},
minute(val) {
this.changeFlag();
},
second(val) {
this.changeFlag();
},
},
created: function (e) {
this.startData();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
toSeconds(day, hours, minutes, seconds) {
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds;
},
timeUp() {
clearInterval(this.timer);
this.$emit("timeup");
},
countDown() {
let seconds = this.seconds;
let [day, hour, minute, second] = [0, 0, 0, 0];
if (seconds > 0) {
day = Math.floor(seconds / (60 * 60 * 24));
hour = Math.floor(seconds / (60 * 60)) - day * 24;
minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60;
second =
Math.floor(seconds) -
day * 24 * 60 * 60 -
hour * 60 * 60 -
minute * 60;
} else {
this.timeUp();
}
if (day < 10) {
day = "0" + day;
}
if (hour < 10) {
hour = "0" + hour;
}
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
this.d = day;
this.h = hour;
this.i = minute;
this.s = second;
},
startData() {
this.seconds = this.toSeconds(
this.day,
this.hour,
this.minute,
this.second
);
if (this.seconds <= 0) {
return;
}
this.countDown();
this.timer = setInterval(() => {
this.seconds--;
if (this.seconds < 0) {
this.timeUp();
return;
}
this.countDown();
}, 1000);
},
changeFlag() {
if (!this.syncFlag) {
this.seconds = this.toSeconds(
this.day,
this.hour,
this.minute,
this.second
);
this.startData();
this.syncFlag = true;
}
},
},
};
</script>
<style lang="less" scoped>
.main {
width: 300px;
border-radius: 15px;
background: #ffffff;
box-shadow: 0px 0px 26px #d9d9d9;
padding: 16px 0;
.title {
font-size: 16px;
}
.gray_color {
color: #9d9d9d;
}
.timer_info {
display: flex;
width: 100%;
justify-content: center;
margin-top: 14px;
.colon {
margin: 0 4px;
font-size: 24px;
}
.day_info {
margin-right: 30px;
}
.timer_num {
font-size: 24px;
}
.timer_font {
font-size: 12px;
}
}
}
</style>
页面注册:
import CutTimer from "@/components/CutTimer.vue";
export default {
components: {
CutTimer,
},
}
页面使用:
<cut-timer
:show-colon="false"
title="截止倒计时:"
:day="countDown.day"
:hour="countDown.hour"
:minute="countDown.minute"
:second="countDown.second"
/>
(1)showDay:是否需要显示天数,我这里是不需要,如果需要则传true
(2)day:天数,传1,表示距离还剩一天
(3)hour:时,传18,表示距离还剩18小时
(4)minute:分,传50,表示距离还剩50分
(5)second:秒,比如传30,表示距离还剩30秒
## 计算倒计时
思路:如果倒计时是后端给你计算好了,那就没什么问题了。但有时候倒计时的时间需要前端自己计算,例如你的boss和你说,这个活动月底过期,你便需要计算当前时间到月底的差值,这个差值在用来做倒计时。
获取当前时间:
function nowTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const date = now.getDate() >= 10 ? now.getDate() : "0" + now.getDate();
const hour = now.getHours() >= 10 ? now.getHours() : "0" + now.getHours();
const miu =
now.getMinutes() >= 10 ? now.getMinutes() : "0" + now.getMinutes();
const sec =
now.getSeconds() >= 10 ? now.getSeconds() : "0" + now.getSeconds();
return (
+year +
"-" +
(month + 1) +
"-" +
date +
" " +
hour +
":" +
miu +
":" +
sec
);
}
获取当月最后一天时间:
function endTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const endOfMonth = new Date(year, month, 0).getDate();
return (
+year +
"-" +
month +
"-" +
endOfMonth+
" 23:59:59"
);
}
获取时间差:
function dayDif(startTime, endTime) {
startTime = new Date(startTime);
endTime = new Date(endTime);
let date3 = endTime.getTime() - startTime.getTime();
let day = Math.floor(date3 / (24 * 3600 * 1000));
let leave1 = date3 % (24 * 3600 * 1000);
let hour = Math.floor(leave1 / (3600 * 1000));
let leave2 = leave1 % (3600 * 1000);
let minute = Math.floor(leave2 / (60 * 1000));
let leave3 = leave2 % (60 * 1000);
let second = Math.round(leave3 / 1000);
return {
day,
hour,
minute,
second,
};
}
这样就能计算到时间差,然后在页面上赋值使用了。
原本以为这样便结束了,但是多疑的我还是在IE上测试了下,果然不行!IE就是个老六!
首先说下,IE不生效的原因是计算时间差这个环节出了问题,调用方法后返回的都是NaN
,然后我百度了许多计算时间差的方法,发现在IE都一致的报NaN
,最终我经过多次修改,终于实现了兼容IE的计算时间差方法
计算时间差兼容IE版:
function cuclDayDif(begintime, endtime) {
begintime = begintime.replace("-", "/");
begintime = begintime.replace("-", "/");
let date1 = new Date(begintime);
endtime = endtime.replace("-", "/");
endtime = endtime.replace("-", "/");
let date2 = new Date(endtime);
let sec = date2.getTime() - date1.getTime();
let second = 1000,
minute = 60 * second,
hour = 60 * minute,
day = 24 * hour;
let days = Math.floor(sec / day);
sec -= days * day;
let hours = Math.floor(sec / hour);
sec -= hours * hour;
let minutes = Math.floor(sec / minute);
sec -= minutes * minute;
let seconds = Math.floor(sec / second);
return {
day: days,
hour: hours,
minute: minutes,
second: seconds,
};
}
这样便大功告成了,但是需要注意的一点是:计算2022-08-12 12:23:54
到 2022-08-25
的时间差时,25号的时间不能写成24:00:00
,要写23:59:59