javascript realizes 10-second countdown for payment

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

Recommend

Detailed explanation of JS variable storage deep copy and shallow copy

Table of contents Variable type and storage space...

Solution to the error when calling yum in docker container

When executing yum in dockerfile or in the contai...

MySQL initialization password operation under Mac

A simple record of the database startup problems ...

Turn off the AutoComplete function in the input box

Now we can use an attribute of input called autoco...

Native JS realizes compound motion of various motions

This article shares with you a compound motion im...

MySQL index knowledge summary

The establishment of MySQL index is very importan...

8 commands to effectively manage processes in Linux

Preface The role of process management: Determine...

Detailed tutorial on deploying Jenkins based on docker

0. When I made this document, it was around Decem...

Windows uses VMware to create a Linux virtual machine and install the CentOS7.2 operating system

Table of contents 1. Follow the wizard to create ...

Use of Vue3 pages, menus, and routes

Table of contents 1. Click on the menu to jump 1....

Analysis of the Nesting Rules of XHTML Tags

In the XHTML language, we all know that the ul ta...

How to use @media in mobile adaptive styles

General mobile phone style: @media all and (orien...

HTML iframe usage summary collection

Detailed Analysis of Iframe Usage <iframe frame...

Professional and non-professional web design

First of all, the formation of web page style main...

Ubuntu 16.04 image complete installation tutorial under VMware

This article shares with you the installation tut...