zoukankan      html  css  js  c++  java
  • 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 方法每隔一秒会执行一次,并将计算结果分别赋予变量 dayhrminsec,同时改变的还有页面上显示的内容。

    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>
  • 相关阅读:
    Benelux Algorithm Programming Contest 2016 Preliminary K. Translators’ Dinner(思路)
    Benelux Algorithm Programming Contest 2016 Preliminary Target Practice
    Benelux Algorithm Programming Contest 2016 Preliminary I. Rock Band
    Benelux Algorithm Programming Contest 2016 Preliminary A. Block Game
    ICPC Northeastern European Regional Contest 2019 Apprentice Learning Trajectory
    ICPC Northeastern European Regional Contest 2019 Key Storage
    2018 ACM ICPC Asia Regional
    2018 ACM ICPC Asia Regional
    Mybatis入库出现异常后,如何捕捉异常
    优雅停止 SpringBoot 服务,拒绝 kill -9 暴力停止
  • 原文地址:https://www.cnblogs.com/ctztake/p/8890761.html
Copyright © 2011-2022 走看看