Vue implements time countdown function

Vue implements time countdown function

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:
  • 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 mall flash sale
  • Vue implements countdown to get verification code effect
  • Vue implements the countdown function of the verification code button
  • Multiple countdown implementation code examples in Vue
  • 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)

<<:  Analysis of the method of setting up scheduled tasks in mysql

>>:  How to Delete Junk Files in Linux Elegantly

Recommend

Data URI and MHTML complete solution for all browsers

Data URI Data URI is a scheme defined by RFC 2397...

mysql 5.7.20 win64 installation and configuration method

mysql-5.7.20-winx64.zipInstallation package witho...

Example of how to quickly build a Redis cluster with Docker

What is Redis Cluster Redis cluster is a distribu...

A brief talk about React Router's history

If you want to understand React Router, you shoul...

HTML set as homepage and add to favorites_Powernode Java Academy

How to implement the "Set as homepage" ...

Detailed explanation of various types of image formats such as JPG, GIF and PNG

Everyone knows that images on web pages are genera...

A brief talk about MySQL pivot tables

I have a product parts table like this: part part...

Problem analysis of using idea to build springboot initializer server

Problem Description Recently, when I was building...

Detailed explanation of the new background properties in CSS3

Previously, we knew several attributes of backgro...

WeChat applet implements fixed header and list table components

Table of contents need: Function Points Rendering...

Vue Element front-end application development to obtain back-end data

Table of contents Overview 1. Acquisition and pro...

MySQL paging analysis principle and efficiency improvement

MySQL paging analysis principle and efficiency im...