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

W3C Tutorial (3): W3C HTML Activities

HTML is a hybrid language used for publishing on ...

Deploy grafana+prometheus configuration using docker

docker-compose-monitor.yml version: '2' n...

JavaScript flow control (branching)

Table of contents 1. Process Control 2. Sequentia...

Solution to Linux not supporting all commands

What should I do if Linux does not support all co...

How to configure VMware virtual machine NAT mode

This article describes the VMware virtual machine...

How to enable MySQL remote connection

For security reasons, MySql-Server only allows th...

How to add Nginx proxy configuration to allow only internal IP access

location / { index index.jsp; proxy_next_upstream...

Web page text design should be like smart girls wearing clothes

<br />"There are no ugly women in the w...

SVG+CSS3 to achieve a dynamic wave effect

A vector wave <svg viewBox="0 0 560 20&qu...

Two ideas for implementing database horizontal segmentation

introduction With the widespread popularity of In...

Some summary of MySQL's fuzzy query like

1. Common usage: (1) Use with % % represents a wi...

MyBatis dynamic SQL comprehensive explanation

Table of contents Preface Dynamic SQL 1. Take a l...