Vue实现人生倒计时小功能@今年总天数、今年剩余天数、这月剩余天数、这周剩余天数、今天剩余时间...

本文主要是介绍Vue实现人生倒计时小功能@今年总天数、今年剩余天数、这月剩余天数、这周剩余天数、今天剩余时间...，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

(壹)博主介绍

🌠个人博客： 尔滨三皮
⌛程序寄语：木秀于林，风必摧之；行高于人，众必非之。

(贰)文章内容

样式没有附加，需要您根据自身需求调整。


<!-- 人生倒计时 --><template><div class="countdownToLifeModuleBox"><!-- 当前时间可显示，可隐藏【隐藏的目的是为了让今天还剩余的秒数出现变化，所以给display: none;】 --><div class="d">当前时间为:{{ dateFormat(nowTime) }}</div><div class="item">今年总天数: <i style="color: var(--theme-color); font-weight: bold">{{ currentYearDay }}</i> 天</div><div class="item">今年还剩余: <i style="color: var(--theme-color); font-weight: bold">{{ remainderYearDay }}</i> 天</div><div class="item">这月还剩余: <i style="color: var(--theme-color); font-weight: bold">{{ remainderMonthDay }}</i> 天</div><div class="item">这周还剩余: <i style="color: var(--theme-color); font-weight: bold">{{ remainderWeekDay }}</i> 天</div><div class="item">今天还剩余:<i style="color: var(--theme-color); font-weight: bold">{{ 24 - (new Date().getHours() + 1) }}时{{ 60 - new Date().getMinutes() }}分{{ 60 - new Date().getSeconds() }}</i>秒</div></div></template><script>export default {name: "CountdownToLifeModule",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() + 1var 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() + 1let 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 = thisthis.timer = setInterval(() => {that.nowTime = new Date().toLocaleString()}, 1000)},//实例销毁之前清除定时器beforeDestroy() {if (this.timer) {clearInterval(this.timer)}},}</script><style lang="less" scoped>