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: