vue-实现倒计时功能

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>

巴特西

vue-实现倒计时功能

JavaScript

Vue.js

最新文章

热门文章