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

AIGC陈春波

于 2024-01-28 22:59:56 发布

阅读量848

点赞数 20

CC 4.0 BY-SA版权

文章标签：前端 vue.js

陈春波

本文链接：https://blog.csdn.net/weixin_48337566/article/details/135902392

该篇文章介绍了如何在个人博客中实现一个可自定义样式的生命周期倒计时模块，展示了如何计算并显示当前时间、剩余年/月/周/天数，以及在JavaScript中实现动态更新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(壹)博主介绍

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

(贰)文章内容

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


<!-- 人生倒计时 -->

<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() + 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>

<style lang="less" scoped>