支付倒计时 - 码农教程

页面确认支付后，会跳转到支付成功页面
1.支付页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div {
		width: 200px;
        height: 280px;
		background-color: #eee;
		margin:0 auto;
		padding:20px;

	}
	button {
		margin: 30px 25px;
	}
	</style>
</head>
<body>
<div>
		<p>商品：Web前端课程</p>
        <p>原价：1980元</p>
        <p>现价：1.98元</p>
        <p>内容：HTML、CSS、JS</p>
        <p>地址：北京市朝阳区</p>
        <p>
            <button>取消</button>
            <button>支付</button>
        </p>

</div>
<script type="text/javascript">
// 逻辑：1.点击支付，出现确认框；2.加载支付成功页面时，触发定时器10s
	document.getElementsByTagName('button')[1].onclick = function() {
		let res = window.confirm('您确定要支付吗');
		if(res){
			// 跳转到支付成功页面
			location.href = './3.succ.html'
		}
	}
</script>
</body>
</html>

2.支付成功页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	 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 type="text/javascript">
	window.onload = function() {
		let timer = 10;
		setInterval(()=>{
			timer--;
			document.getElementById('jumpTo').innerText = timer;
			if(timer==0) {
				location.href = 'https://jinwen01.ke.qq.com'
			}
		},1000)

	}
	document.getElementsByTagName('button')[0].onclick = function(){
            location.href = 'https://jinwen01.ke.qq.com';
        }

	</script>
</body>
</html>

原文地址：https://www.cnblogs.com/gracexin/p/15098317.html