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 use Flex layout to achieve scrolling of fixed content area in the head

The fixed layout of the page header was previousl...

Summary of clipboard.js usage

Table of contents (1) Introduction: (2) The ways ...

CSS beginner tutorial: background image fills the entire screen

If you want the entire interface to have a backgr...

Detailed explanation of mysql deadlock checking and deadlock removal examples

1. Query process show processlist 2. Query the co...

In-depth explanation of closure in JavaScript

Introduction Closure is a very powerful feature i...

Use of Linux stat command

1. Command Introduction The stat command is used ...

Ubuntu installs multiple versions of CUDA and switches at any time

I will not introduce what CUDA is, but will direc...

Vue shuttle box realizes up and down movement

This article example shares the specific code for...

How to implement import and export mysql database commands under linux

1. Export the database using the mysqldump comman...

Directory permissions when creating a container with Docker

When I was writing a project yesterday, I needed ...