网络编程
位置：首页>> 网络编程>> JavaScript>> 基于JS实现01支付后的10秒倒计时

基于JS实现01支付后的10秒倒计时

作者：Ldz123　　发布时间：2024-04-10 11:02:30　

标签：js,10秒,倒计时
这是一个通过js实现的支付后的页面，点击支付会跳出一个弹窗，提示你是否要确定支付，确定后进入付后界面，该页面有着10秒倒计时，计时结束后便会返回原界面。也可以选择立刻返回，来返回主页面<br>第一个zhifu.html页面<br><!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>支付页面</title>
   <style>
       div {
           width: 200px;
           height: 280px;
           background-color: #eee;
           padding: 20px;
           margin: auto;
       }

button {
           margin: 30px 25px;
       }
   </style>
</head>

<body>
   <div>
       <p>商品：web前端课程</p>
       <p>原价：1980元</p>
       <p>现价：1.98元</p>
       <p>内容：html、css、JavaScript</p>
       <p>地址：郑州升达经贸管理学院</p>
       <p>
           <button>取消</button>
           <button>支付</button>
       </p>
   </div>
   <script>
       //点击支付出现确认框
       document.getElementsByTagName('button')[1].onclick = function() {
           let res = window.confirm('您确认要支付吗？')
           if (res) {
               location.href = './ten.html'

}
       }
   </script>
</body>

</html><br>第二个ten.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>10秒倒计时</title>
   <style>
       div {
           margin: 0 auto;
           width: 500px;
       }

#jumpto {
           color: red;
           font-size: 30px;
       }
   </style>
</head>

<body>
   <div>
       <h2>恭喜您，支付成功</h2>
       <span id="jumpto">10</span>秒后自动返回首页
       <p><button>立刻返回</button></p>
   </div>
   <script>
       //加载页面时，应该触发定时器时间10s
       window.onload = function() {
           let timer = 10;
           setInterval(() => {
               timer--;
               document.getElementById('jumpto').innerHTML = timer;
               if (timer == 0) {
                   location.href = './zhifu.html';
               }
           }, 1000);
       }
       document.getElementsByTagName('button')[0].onclick = function() {
           location.href = './zhifu.html';
       }
   </script>
</body>

</html>

基于JS实现01支付后的10秒倒计时

基于JS实现01支付后的10秒倒计时

来源：https://www.cnblogs.com/Ldz123/archive/2023/03/30/17261329.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com