This article example shares the specific code of Vue to realize the time countdown function for your reference. The specific content is as follows need:Make a countdown effect for the remaining payment time Effect picture:Code:<template> <div>Remaining payment time: {{count}}</div> </template> <script> export default { data() { return { count: '', // countdown seconds: 864000 // 10 days of seconds} }, mounted() { this.Time() //Call the timer}, methods: { // Day, hour, minute, and second formatting function countDown() { let d = parseInt(this.seconds / (24 * 60 * 60)) d = d < 10 ? "0" + d : d let h = parseInt(this.seconds / (60 * 60) % 24); h = h < 10 ? "0" + h : h let m = parseInt(this.seconds / 60 % 60); m = m < 10 ? "0" + m : m let s = parseInt(this.seconds % 60); s = s < 10 ? "0" + s : s this.count = d + 'day' + h + 'hour' + m + 'minute' + s + 'second' }, //The timer parameter is reduced by 1 every 1 second Time() { setInterval(() => { this.seconds -= 1 this.countDown() }, 1000) }, } } </script> The seconds of the time can be modified according to your needs Let me share with you another piece of code: vue hour, minute, second countdown countTime: function () { //Get the current time var date = new Date(); var now = date.getTime(); //Set the deadline var endDate = new Date("2018-10-22 23:23:23"); var end = endDate.getTime(); //Time difference var leftTime = end - now; //Define variables d, h, m, s to save countdown time if (leftTime >= 0) { d = Math.floor(leftTime / 1000 / 60 / 60 / 24); this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24); this.m = Math.floor(leftTime / 1000 / 60 % 60); this.s = Math.floor(leftTime / 1000 % 60); } console.log(this.s); //Recursively call the countTime method every second to display the dynamic time effect setTimeout(this.countTime, 1000); } For more articles about countdown, please see the special topic: "Countdown Function" 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:
|
<<: Analysis of the method of setting up scheduled tasks in mysql
>>: How to Delete Junk Files in Linux Elegantly
HTML is a hybrid language used for publishing on ...
1 Check whether the kernel has a tun module modin...
docker-compose-monitor.yml version: '2' n...
Table of contents 1. Process Control 2. Sequentia...
What should I do if Linux does not support all co...
This article describes the VMware virtual machine...
For security reasons, MySql-Server only allows th...
location / { index index.jsp; proxy_next_upstream...
<br />"There are no ugly women in the w...
I will explain the installation of MySQL under Wi...
Table of contents Tomcat Introduction Tomcat depl...
A vector wave <svg viewBox="0 0 560 20&qu...
introduction With the widespread popularity of In...
1. Common usage: (1) Use with % % represents a wi...
Table of contents Preface Dynamic SQL 1. Take a l...