javascript realizes 10-second countdown for payment

This article shares the specific code of javascript to realize the 10-second countdown of payment for your reference. The specific content is as follows

The effect diagram is as follows:

This case is actually very simple. As long as you master the onclick function in the basics of js and the use of timers , you can quickly achieve such an effect. Let's take a look at how to do it~

First, you need two HTML files. Use HTML and CSS to write the initial page effects in the two files. I won’t go into details here. For details, see the following code

Let's talk about the effects that js needs to produce:

1. Click on Pay in page 1 to jump to another file
2. When you first enter page 2, start the 10-second countdown . When the countdown ends, return to page 1.
3. Click Return Now on page 2 to return to page 1

This is the effect we need to do

So how do we jump between two pages?

=> Use onclick and location.href="url" rel="external nofollow" to change location.href when the mouse is clicked
(The url here refers to the location of another HTML file you stored)

The timing effect is very simple. Just use setInterval to change innerText of the element. When the number is equal to 0, change the location to jump to the page.

The code is as follows:

Page 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn{
            display: block;
            margin:130px auto;
            width: 300px;
            height: 100px;
            font-size:30px;
        }
    </style>
</head>
<body>
    <button id="btn">Pay</button>
    <script>
        let btn = document.getElementById("btn");
        
        btn.onclick=function(){
            let con = window.confirm("Are you sure?");
            if(con){
                location.href='./payment.html';
            }
        }
    </script>
</body>
</html>

Page 2:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #spa {
            font-size: 20px;
            color: red;
        }

        #total {
            width: 200px;
            height: 200px;
            background-color: rgba(169, 169, 169, 0.315);
            margin: 40px auto;
            border-radius: 20px;
            padding: 20px;
            position:flex;
            flex-direction: column;
            text-align: center;
        }

        #total h3 {
            padding-top: 20px;
        }

        #total button {
            margin-top: 30px
        }
    </style>
</head>

<body>
    <div id="total">
        <h3>Congratulations, your payment was successful! </h3>
        <div>
            <span id="spa">10</span>
            <span>Automatically return to the home page after seconds</span>
        </div>
        <button id="btn">Return now</button>
    </div>
    <script>
        var spa = document.getElementById("spa");
        let t = 10;
        setInterval(() => {
            t--;
            spa.innerText = t;
            if (t == 0) {
                location.href = "./pay 10 seconds.html";
            }
        }, 400);
        
        var btn = document.getElementById("btn");
        btn.onclick=function(){
            location.href="./Pay 10 seconds.html" rel="external nofollow" 
        }
    </script>
</body>

</html>

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:

js to realize payment countdown and return to the home page
AngularJS payment countdown function implementation ideas
JavaScript high imitation Alipay countdown page and code implementation
js to create payment countdown page
Implementation example of JS payment page countdown

<<: IE8 Developer Tools Menu Explanation

>>: Zabbix combined with bat script to achieve multiple application status monitoring method

A brief discussion on the semantics of HTML and some simple optimizations

javascript realizes 10-second countdown for payment

A brief discussion on the semantics of HTML and some simple optimizations

Detailed explanation of how to monitor MySQL statements

Example of how to install kong gateway in docker

Web design tips on form input boxes

Summary of several postures that must be mastered in Linux compilation optimization

How to prevent users from copying web page content using pure CSS

Detailed tutorial on installing Python 3.8.1 on Linux

Key knowledge summary of Vue development guide

How to set the memory size of Docker tomcat

The difference and usage between div and span

Recommend

JavaScript implements simple calculator function

Linux (center OS7) installs JDK, tomcat, mysql to build a java web project running environment

Running PostgreSQL in Docker and recommending several connection tools

Design Theory: Textual Expression and Usability

How does MySQL implement ACID transactions?

Rules for using mysql joint indexes

Detailed graphic explanation of how to install and completely delete MySQL by decompression

KTL tool realizes the method of synchronizing data from MySQL to MySQL

Nodejs-cluster module knowledge points summary and example usage

Detailed tutorial on setting up multiple instances of MySQL 8 on CentOS 7 (you can have as many as you want)

The pitfalls and solutions caused by the default value of sql_mode in MySQL 5.7

MySQL query example explanation through instantiated object parameters

MySql 8.0.16-win64 Installation Tutorial

Implementation of react routing guard (routing interception)

Several principles for website product design reference