<template>
<div style="text-align: center;font-weight: bold;font-size: 25px;">
<el-card>
<div>当前时间为:{{ dateFormat(nowTime) }}</div>
<div>本年的天数为:{{currentYearDay}}</div>
<div>本年剩余的天数为:{{remainderYearDay}}</div>
<div>本月剩余的天数为:{{remainderMonthDay}}</div>
<div>本周剩余的天数为:{{remainderWeekDay}}</div>
<div>今天剩余的时间为:{{ 24 - (new Date().getHours() + 1) }}时{{60 - new Date().getMinutes()}}分{{ 60 - new Date().getSeconds() }}秒</div>
</el-card>
</div>
</template>
<script>
export default {
name: "DateUtil",
data() {
return {
nowTime: new Date(),
};
},
methods: {
//格式化时间
dateFormat() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
let week = date.getDay(); // 星期
let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六",];
return (year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + weekArr[week]);
},
},
computed: {
currentYearDay() {
let nowYear = new Date().getFullYear();
return (nowYear % 4 == 0 && nowYear % 100 != 0) || nowYear % 400 == 0 ? 366 : 365;
},
remainderYearDay() {
let nowTime = new Date();
let endTime = new Date(nowTime.getFullYear() + 1, 1, 1, 0, 0, 0, 0);
return parseInt((endTime - nowTime) / 86400000) - 31;
},
remainderMonthDay() {
let nowMonth = new Date().getMonth() + 1;
let nowYear = new Date().getFullYear();
let nowDay1 = new Date().getDate();
if (nowMonth === 1 || nowMonth === 3 || nowMonth === 5 || nowMonth === 7 || nowMonth === 8 || nowMonth === 10 || nowMonth === 12) {
return 31 - nowDay1;
}
if (nowMonth === 4 || nowMonth === 6 || nowMonth === 9 || nowMonth === 11) {
return 30 - nowDay1;
}
if (nowMonth == 2) {
if ((nowYear % 4 == 0 && nowYear % 100 != 0) || nowYear % 400 == 0) {
return 29 - nowDay1;
} else {
return 28 - nowDay1;
}
}
return "";
},
remainderWeekDay() {
return 7 - new Date().getDay();
},
},
//在挂载时启动定时器
mounted() {
let that = this;
this.timer = setInterval(() => {
that.nowTime = new Date().toLocaleString();
}, 1000);
},
//实例销毁之前清除定时器
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},
};
</script>
Vue显示当前时间,倒计时
最新推荐文章于 2024-05-17 16:19:13 发布