Vue implements countdown between specified dates

Vue implements countdown between specified dates

This article example shares the specific code of Vue to implement the countdown between specified dates for your reference. The specific content is as follows

The effect diagram is as follows

The moment.js date processing library is used here as follows

npm install moment or yarn add moment

html

<div class="time-down">
  <div class="back">{{dayNum}}</div>
  <div class="font-14 date">Day</div>
  <div class="back">{{hourNum}}</div>
  <div class="font-14 date">Time</div>
  <div class="back">{{minuteNum}}</div>
  <div class="font-14 date">Minutes</div>
  <div class="back">{{secondNum}}</div>
  <div class="font-14 date">Seconds</div>
</div>

js

import moment from 'moment';
export default {
    name: 'TimeRangPage',
    props: {
      startTime: String,
      endTime: String
    },
    data () {
      return {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
        timeSetInterval: null,
        showTimeDown: false,
        showOver: false
      };
    },
    created () {
      if (moment(new Date()).isBefore(this.startTime)) {
        this.showTimeDown = true;
        this.timeDown();
      }
      if (moment(new Date()).isAfter(this.endTime)) this.showOver = true;
    },
    methods: {
      timeDown () {
        this.timeSetInterval = setInterval(() => {
          if (moment(this.startTime).isBefore(moment())) {
            this.showTimeDown = false;
            clearInterval(this.timeSetInterval);
            location.reload();
          }
          let dur = moment.duration(moment(this.startTime) - moment(), 'ms');
          this.days = dur.get('days');
          this.hours = dur.get('hours');
          this.minutes = dur.get('minutes');
          this.seconds = dur.get('seconds');
        }, 1000);
      }
    },
    computed: {
      dayNum () {
        if (this.days < 10) return '0' + this.days;
        return this.days;
      },
      hourNum () {
        if (this.hours < 10) return '0' + this.hours;
        return this.hours;
      },
      minuteNum () {
        if (this.minutes < 10) return '0' + this.minutes;
        return this.minutes;
      },
      secondNum () {
        if (this.seconds < 10) return '0' + this.seconds;
        return this.seconds;
      }
    }
  };

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue writes a simple countdown button function
  • Simple implementation of the 60-second countdown function of the vue verification code
  • Vue2.0 countdown plug-in (timestamp refresh jump is not affected)
  • SMS verification code countdown demo based on vue
  • Vue implements the countdown function of the verification code button
  • Multiple countdown implementation code examples in Vue
  • Vue implements the countdown function of the mall flash sale
  • Vue implements countdown to get verification code effect
  • Detailed explanation of designing a countdown component in Vue
  • Vue+canvas realizes a countdown plug-in with cool clock effects (a vue2 plug-in that has been published to npm and can be used out of the box)

<<:  How to set up scheduled tasks in Linux and Windows

>>:  MySQL 5.7.23 winx64 installation and configuration method graphic tutorial under win10

Recommend

How to encapsulate axios request with vue

In fact, it is very simple to encapsulate axios i...

Vue song progress bar sample code

Note that this is not a project created by vue-cl...

Tutorial on installing mysql5.7.23 on Ubuntu 18.04

This article shares with you the specific method ...

Why can't my tomcat start?

Table of contents Phenomenon: Port usage: Spellin...

Implementing circular scrolling list function based on Vue

Note: You need to give the parent container a hei...

Install Percona Server+MySQL on CentOS 7

1. Environmental Description (1) CentOS-7-x86_64,...

Specific implementation methods of MySQL table sharding and partitioning

Vertical table Vertical table splitting means spl...

How to track users with JS

Table of contents 1. Synchronous AJAX 2. Asynchro...

How to use a game controller in CocosCreator

Table of contents 1. Scene layout 2. Add a handle...

MySQL index principle and query optimization detailed explanation

Table of contents 1. Introduction 1. What is an i...

Difference between querySelector and getElementById methods in JS

Table of contents 1. Overview 1.1 Usage of queryS...

Some small methods commonly used in html pages

Add in the <Head> tag <meta http-equiv=&q...

In-depth explanation of binlog in MySQL 8.0

1 Introduction Binary log records SQL statements ...

Introduction to the use and difference between in and exists in MySQL

First put a piece of code for(int i=0;i<1000;i...

Example of Vue routing listening to dynamically load the same page

Table of contents Scenario Analysis Development S...