JavaScript支付成功跳转(定时器)

一个支付完成跳转页面,由a页面支付成功跳转b页面。再由b页面倒计时,时间到了自动返回过去。

a.html

<body>
  <div>
    <p>11111</p>
    <p>22222</p>
    <p>33333</p>
    <p>44444</p>
    <p>55555</p>
    <p>
      <button>取消</button>
      <button>支付</button>
    </p>
  </div>
  <script type="text/javascript">
  //获取支付的按钮 let btn = document.getElementsByTagName('button')[1];
  //给按钮添加点击事件 btn.onclick
= function(){
    //点击按钮之后弹出警告框 let res
= window.confirm('确定支付吗');
    //当我们点了确定之后跳转到我们的b页面
if(res){ location.href = './b.html'; } } </script> </body>

b.html<body  <div>

    <h2>恭喜你,支付成功</h2>
    <span id="jumpTo">10</span>秒后返回首页
    <p><button>立即返回</button></p>
  </div>
  <script type="text/javascript">
    //当页面加载完毕运行。我们这里的js写在html后面可以不用写。 window.onload = function(){
     //定义一个初始时间 let timer
= 10;
      //开启定时器 setInterval(()
=>{
      //递减 timer
--;
      //获取我们需要改变的数字的那个标签,修改里面文本等于已经递减的timer document.getElementById(
'jumpTo').innerText = timer;
      //如果时间等于0就跳回去a页面
if(timer==0){ location.href = './a.html'; }
},
1000);
     //回去立即返回的button,点击之后直接跳转回去。 document.getElementsByTagName(
'button')[0].onclick = function(){ location.href = './a.html'; } }; </script> </body>

 

posted @ 2021-08-26 15:13  Private!  阅读(515)  评论(0编辑  收藏  举报