js to realize payment countdown and return to the home page
|
Payment countdown to return to the home page case introduction: bind a button on the home page to jump to another page, using simple js syntax, getElementsByTagName, location.href, etc. index.html The effect diagram is as follows:
<!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>
.wrapper{
background-color:aquamarine;
width: 300px;
height: 300px;
margin: 0 auto;
}
h2{
text-align: center;
}
button{
text-align: center;
margin-left: 68px;
}
</style>
</head>
<body>
<div class="wrapper">
<h2>Product:smile</h2>
<h2>Price:infinity</h2>
<h2>Payment method:Net</h2>
<h2>Order number:123456789</h2>
<button>Cancel</button>
<button>Pay</button>
</div>
<script>
//Logic: Click the payment button to jump to the page //Get the second (the first is 0) tag named 'button', add a click event and bind a function document.getElementsByTagName('button')[1].onclick = function(){
//Confirmation box before jump let res = window.confirm('Please confirm payment');
//Judge whether it is true, jump if true if (res) {
//Directly use the HTML page in the directory, or enter other website links location.href = "./return.html"
}
}
</script>
</body>
</html>return.html
<!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>
.wrapper{
width: 300px;
height: 400px;
margin: 0 auto;
}
.content{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<h2>Payment successful</h2>
<span id="countDown">Return to home page in 10</span> seconds<button>Return immediately</button>
</div>
</div>
<script>
//Logic: The page opens and the countdown starts window.onload = function(){
//First assign let timer = 10;
//Countdown//arrow function()=>{} == function(){}
setInterval(()=>{
timer--;
document.getElementById('countDown').innerText = timer;
// Jump to the home page when it is equal to 0 if (timer==0) {
location.href = "./index.html"
}
},1000);
}
//Click the button to return to the home page immediatelydocument.getElementsByTagName('button')[0].onclick = function(){
location.href = "./index.html"
}
</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:
|
<<: A brief discussion on which fields in Mysql are suitable for indexing
>>: Example code for implementing the "plus sign" effect with CSS
Recommend
HTML table tag tutorial (44): table header tag
<br />In order to clearly distinguish the ta...
Detailed explanation of the 10061 unknown error when using Navicat to connect to a remote Linux MySQL database
When using Navicat to connect to a remote Linux M...
Example of implementing text wrapping in html (mixed text and images in html)
1. Text around the image If we use the normal one...
How to implement scheduled backup of CentOS MySQL database
The following script is used for scheduled backup...
How to build a React project with Vite
Table of contents Preface Create a Vite project R...
Tomcat9 download, installation and configuration + detailed tutorial on integrating into eclipse
tomcat official website tomcat is equivalent to a...
CSS3 realizes the glowing border effect
Operation effect: html <!-- This element is no...
How to fix abnormal startup of mysql5.7.21
A colleague reported that a MySQL instance could ...
CSS example code for implementing sliding doors
The so-called sliding door technology means that ...
Summary of commonly used multi-table modification statements in Mysql and Oracle
I saw this question in the SQL training question ...
Detailed explanation of JSONObject usage
JSONObject is just a data structure, which can be...
MySQL multi-table query detailed explanation
Eating well and getting enough rest sounds simple...
Why is the disk space still occupied after deleting table data in MySQL?
Table of contents 1. Mysql data structure 2. The ...
A brief discussion on the font settings in web pages
Setting the font for the entire site has always b...
React+Amap obtains latitude and longitude in real time and locates the address
Table of contents 1. Initialize the map 2. Map Po...