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

mysql5.7 create user authorization delete user revoke authorization

1. Create a user: Order: CREATE USER 'usernam...

A practical tutorial on how to quickly insert tens of millions of records into MySQL

1. Create a database 2. Create a table 1. Create ...

How to modify the previous command when an input error occurs in the MySQL command prompt

Table of contents Current Issues Solution process...

Native JS to achieve special effects message box

This article shares with you a special effect mes...

Online web tools and applications that web developers and designers cannot do without

You may remember that in the past articles we hav...

JavaScript implementation of the back to top button example

This article shares the specific code for JavaScr...

Mysql index types and basic usage examples

Table of contents index - General index - Unique ...

JavaScript flow control (loop)

Table of contents 1. for loop 2. Double for loop ...

MySQL SQL statement method to hide the middle four digits of the mobile phone number

First query table structure (sys_users): SELECT *...

Basic knowledge of website design: newbies please read this

Now many people are joining the ranks of website ...

Tutorial on upgrading, installing and configuring supervisor on centos6.5

Supervisor Introduction Supervisor is a client/se...

How to add fields and comments to a table in sql

1. Add fields: alter table table name ADD field n...

The process of installing and configuring nginx in win10

1. Introduction Nginx is a free, open source, hig...

CSS new feature contain controls page redrawing and rearrangement issues

Before introducing the new CSS property contain, ...

How to hide the border/separation line between cells in a table

Only show the top border <table frame=above>...