溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“基于JS如何實現01支付后的10秒倒計時”，在日常操作中，相信很多人在基于JS如何實現01支付后的10秒倒計時問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”基于JS如何實現01支付后的10秒倒計時”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
這是一個通過js實現的支付后的頁面，點擊支付會跳出一個彈窗，提示你是否要確定支付，確定后進入付后界面，該頁面有著10秒倒計時，計時結束后便會返回原界面。也可以選擇立刻返回，來返回主頁面<br>第一個zhifu.html頁面<br><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>支付頁面</title>
<style>
div {
width: 200px;
height: 280px;
background-color: #eee;
padding: 20px;
margin: auto;
}
button {
margin: 30px 25px;
}
</style>
</head>
<body>
<div>
<p>商品：web前端課程</p>
<p>原價：1980元</p>
<p>現價：1.98元</p>
<p>內容：html、css、JavaScript</p>
<p>地址：鄭州升達經貿管理學院</p>
<p>
<button>取消</button>
<button>支付</button>
</p>
</div>
<script>
//點擊支付出現確認框
document.getElementsByTagName('button')[1].onclick = function() {
let res = window.confirm('您確認要支付嗎？')
if (res) {
location.href = './ten.html'
}
}
</script>
</body>
</html><br>第二個ten.html頁面<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10秒倒計時</title>
<style>
div {
margin: 0 auto;
width: 500px;
}
#jumpto {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<h3>恭喜您，支付成功</h3>
<span id="jumpto">10</span>秒后自動返回首頁
<p><button>立刻返回</button></p>
</div>
<script>
//加載頁面時，應該觸發定時器時間10s
window.onload = function() {
let timer = 10;
setInterval(() => {
timer--;
document.getElementById('jumpto').innerHTML = timer;
if (timer == 0) {
location.href = './zhifu.html';
}
}, 1000);
}
document.getElementsByTagName('button')[0].onclick = function() {
location.href = './zhifu.html';
}
</script>
</body>
</html>
到此，關于“基于JS如何實現01支付后的10秒倒計時”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
