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:
|
<<: How to set up scheduled tasks in Linux and Windows
>>: MySQL 5.7.23 winx64 installation and configuration method graphic tutorial under win10
In fact, it is very simple to encapsulate axios i...
Note that this is not a project created by vue-cl...
This article shares with you the specific method ...
Table of contents Phenomenon: Port usage: Spellin...
Note: You need to give the parent container a hei...
1. Environmental Description (1) CentOS-7-x86_64,...
Vertical table Vertical table splitting means spl...
Table of contents 1. Synchronous AJAX 2. Asynchro...
Table of contents 1. Scene layout 2. Add a handle...
Table of contents 1. Introduction 1. What is an i...
Table of contents 1. Overview 1.1 Usage of queryS...
Add in the <Head> tag <meta http-equiv=&q...
1 Introduction Binary log records SQL statements ...
First put a piece of code for(int i=0;i<1000;i...
Table of contents Scenario Analysis Development S...