Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use javaScript to achieve 10-second countdown to payment". In daily operation, I believe many people have doubts about how to use javaScript to achieve 10-second countdown to payment. Xiaobian consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for you to answer the question of "how to use javaScript to achieve 10-second countdown to payment". Next, please follow the editor to study!

The details are as follows

The effect picture is as follows:

This case is actually very simple. As long as you master the onclick function in js and the use of timer, you can quickly achieve this effect. Let's see how to do it.

First of all, you need two html files, in which html and css are used to write the initial page effect respectively. I won't say much here, but you can take a look at the following code

Let's talk about what js needs to do:

1. Click pay on page 1 to jump to another file

2. When you first enter page 2, you need to start timing for 10 seconds, and return to page 1 when the timing is over.

3. Click the immediate return of page 2 to return to page 1

That's what 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 that you have stored.)

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

The code is as follows:

Page 1:

Document # btn {display: block; margin:130px auto; width: 300px; height: 100px; font-size:30px;} pay let btn=document.getElementById ("btn"); btn.onclick=function () {let con=window.confirm ("are you sure?") ; if (con) {location.href='./ pay .html';}}

Page 2:

Document # 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 h4 {padding-top: 20px;} # total button {margin-top: 30px} Congratulations on your successful payment! Automatically return to the home page in 10 seconds and immediately return var spa = document.getElementById ("spa"); let t = 10; setInterval (()) = > {tmuri; spa.innerText = t; if (t = = 0) {location.href = ". / pay for 10 seconds .html" Var btn=document.getElementById ("btn"); btn.onclick=function () {location.href= ". / pay 10 seconds. Html" rel= "external nofollow"} at this point, the study on "how to use javaScript to realize the 10-second countdown to payment" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.