vue-实现倒计时功能

Posted 2020-10-31 A-a

javascript

创建一个 countdown 方法，用于计算并在控制台打印距目标时间的日、时、分、秒数，每隔一秒递归执行一次。

msec 是当前时间距目标时间的毫秒数，由时间戳相减得到，我们将以这个数为基础计算。我们都知道1天等于24小时，1小时等于60分钟，1分钟等于60秒，1秒等于1000毫秒。所以，msec / 1000 / 60 / 60 / 24 保留整数就是天数。如果换用 % 取余数，再保留整数后得到的就是小时数。以此类推就能算出其他所有数。

function countdown () {
  // 目标日期时间戳
  const end = Date.parse(new Date(‘2017-12-01‘))
  // 当前时间戳
  const now = Date.parse(new Date())
  // 相差的毫秒数
  const msec = end - now
  // 计算时分秒数
  let day = parseInt(msec / 1000 / 60 / 60 / 24)
  let hr = parseInt(msec / 1000 / 60 / 60 % 24)
  let min = parseInt(msec / 1000 / 60 % 60)
  let sec = parseInt(msec / 1000 % 60)
  // 个位数前补零
  hr = hr > 9 ? hr : ‘0‘ + hr
  min = min > 9 ? min : ‘0‘ + min
  sec = sec > 9 ? sec : ‘0‘ + sec
  // 控制台打印
  console.log(`${day}天 ${hr}小时 ${min}分钟 ${sec}秒`)
  // 一秒后递归
  setTimeout(function () {
    countdown()
  }, 1000)
}

控制台打印结果：

27天 07小时 49分钟 10秒
27天 07小时 49分钟 09秒
27天 07小时 49分钟 08秒
...

Vue.js

如果单纯使用 JavaScript ，我们需要在每次计算后手动更新 DOM 元素（将数据显示给用户），既不方便又难以维护。实际项目中更多的是配合前端框架，将计算结果实时渲染到页面上。

页面结构中的数据来自 Vue 实例的 data 对象。

<div id="app">{{ `${day}天 ${hr}小时 ${min}分钟 ${sec}分钟` }}</div>

mounted 是 Vue 的生命周期方法，可以理解为在页面加载完毕后执行 countdown 方法。countdown 方法每隔一秒会执行一次，并将计算结果分别赋予变量 day、hr、min、sec，同时改变的还有页面上显示的内容。

new Vue({
  el: ‘#app‘,
  data: function () {
    return {
      day: 0, hr: 0, min: 0, sec: 0
    }
  },
  mounted: function () {
    this.countdown()
  },
  methods: {
    countdown: function () {
      const end = Date.parse(new Date(‘2017-12-01‘))
      const now = Date.parse(new Date())
      const msec = end - now
      let day = parseInt(msec / 1000 / 60 / 60 / 24)
      let hr = parseInt(msec / 1000 / 60 / 60 % 24)
      let min = parseInt(msec / 1000 / 60 % 60)
      let sec = parseInt(msec / 1000 % 60)
      this.day = day
      this.hr = hr > 9 ? hr : ‘0‘ + hr
      this.min = min > 9 ? min : ‘0‘ + min
      this.sec = sec > 9 ? sec : ‘0‘ + sec
      const that = this
      setTimeout(function () {
        that.countdown()
      }, 1000)
    }
  }
})

上述摘自网上 ，对于vue的写法我个人有一个优化,当我们离开吗，某个界面时不应该让他在计时,而是我们在当前页面的时候才计时这样显得更合理一点

<template>
    <span v-if="Date.parse(new Date(deadline)) <= Date.parse(new Date()) && Date.parse(new Date()) < Date.parse(new Date(start))">待开始</span>
    <span v-else-if="Date.parse(new Date())===Date.parse(new Date(start))">已开始</span>
    <span v-else>倒计时{{`${day}天${hr}小时${min}分钟${sec}秒`}}</span>
</template>

<script>
    export default {
        props: [‘deadline‘, ‘start‘],
        name: "dateComponent",
        data: function () {
            return {
                day: 0, hr: 0, min: 0, sec: 0,
            }
        },
        mounted: function () {
            this._interval = setInterval(() => {
                this.countdown();
            }, 1000)
        },
         destroyed () {
            clearInterval(this._interval)
        },
        methods: {
            countdown: function () {
                const end = Date.parse(new Date(this.start));
                const now = Date.parse(new Date());
                const msec = end - now;
                let day = parseInt(msec / 1000 / 60 / 60 / 24);
                let hr = parseInt(msec / 1000 / 60 / 60 % 24);
                let min = parseInt(msec / 1000 / 60 % 60);
                let sec = parseInt(msec / 1000 % 60);
                this.day = day;
                this.hr = hr > 9 ? hr : ‘0‘ + hr;
                this.min = min > 9 ? min : ‘0‘ + min;
                this.sec = sec > 9 ? sec : ‘0‘ + sec;
               
                // const that = this;
                // console.log(this.day===0 && this.hr===‘00‘ && this.min===‘00‘&& this.sec===‘00‘);
                // if(this.day===0 && this.hr=== ‘00‘ && this.min===‘00‘&& this.sec ===‘00‘){
                //     console.log(1234566)
                //     return
                // }
                // setTimeout(function () {
                //     that.countdown()
                // }, 1000)
            }

        },


    }
</script>

<style scoped>

</style>