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>