<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>confirm.html</title>
<style>
div {
width: 200px;
height: 280px;
background-color: #eee;
padding: 20px;
margin: 0 auto;
}
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 id="btn">支付</button>
</p>
</div>
<script>
var btn = document.getElementById('btn')
btn.onclick = function() {
// console.log(99999);
//在真实项目中,是不用confirm来设置弹出框的
//要么用框架里面的弹出框,要么就自己设置方法弹出一个自定义的div弹出框
const res = confirm('您确定支付吗?')
if (res) {
location.href = './succ.html'
//window可以省略不写
//window.location.href = './succ.html'
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" />
<title>succ.html</title>
<style>
div {
margin: 0 auto;
width: 500px;
}
#jumpTo {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<h2>恭喜您,支付成功</h2>
<span id="num">10</span>秒后自动返回首页
<p><button id="btn">立即返回</button></p>
</div>
<script>
var num = 10;
var btn = document.getElementById('btn')
function time() {
num--;
document.getElementById('num').innerHTML = num;
if (num == 0) {
clearInterval(t)
window.location.href = './confirm.html'
}
}
// 引用函数要加引号
var t = setInterval("time()", 1000);
btn.onclick = function() {
window.location.href = './confirm.html'
}
</script>
</body>
</html>
效果图: