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
The fixed layout of the page header was previousl...
Table of contents (1) Introduction: (2) The ways ...
CJK is the abbreviation of CJK Unified Ideographs...
If you want the entire interface to have a backgr...
The following functions are implemented: 1. Usern...
1. Query process show processlist 2. Query the co...
Introduction Closure is a very powerful feature i...
This article shares with you the graphic tutorial...
1. Command Introduction The stat command is used ...
I will not introduce what CUDA is, but will direc...
This article example shares the specific code for...
1. Export the database using the mysqldump comman...
Required effect: After clicking to send the verif...
When I was writing a project yesterday, I needed ...
1. Create a test table CREATE TABLE `testsign` ( ...