支付倒计时

2021-08-04 12:32:57 阅读：156 来源： 互联网

标签：timer 倒计时 href location 支付 document 页面

页面确认支付后，会跳转到支付成功页面
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>

标签：timer,倒计时,href,location,支付,document,页面
来源： https://www.cnblogs.com/gracexin/p/15098317.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

支付倒计时