溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用js實現支付倒計時返回首頁”，在日常操作中，相信很多人在怎么用js實現支付倒計時返回首頁問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用js實現支付倒計時返回首頁”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
支付倒計時返回首頁案例簡介：在首頁綁定一個按鈕跳轉到另一個頁面，用到了簡單的js語法，getElementsByTagName、location.href等。
index.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>Document</title>
<style>
.wrapper{
background-color:aquamarine;
width: 300px;
height: 300px;
margin: 0 auto;
}
h3{
text-align: center;
}
button{
text-align: center;
margin-left: 68px;
}
</style>
</head>
<body>
<div class="wrapper">
<h3>商品:smile</h3>
<h3>價格:infinity</h3>
<h3>支付方式:Net</h3>
<h3>訂單號:123456789</h3>
<button>取消</button>
<button>支付</button>
</div>
<script>
//邏輯:點擊支付按鈕進行跳轉頁面
//獲得第二個(第一個是0)標簽名為'button'的標簽添加點擊事件并且綁定一個函數
document.getElementsByTagName('button')[1].onclick = function(){
//跳轉前的確認框
let res = window.confirm('請確認支付');
//判斷是否為真,為真跳轉
if(res){
//直接使用目錄下的html頁面,也可輸入其他網站鏈接
location.href = "./return.html"
}
}
</script>
</body>
</html>return.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>Document</title>
<style>
.wrapper{
width: 300px;
height: 400px;
margin: 0 auto;
}
.content{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<h3>支付成功</h3>
<span id="countDown">10</span>秒后返回首頁
<button>立即返回</button>
</div>
</div>
<script>
//邏輯:頁面打開,開始倒計時
window.onload = function(){
//先賦值
let timer = 10;
//倒計時
//箭頭函數()=>{} == function(){}
setInterval(()=>{
timer--;
document.getElementById('countDown').innerText = timer;
//等于0時跳轉首頁
if(timer==0){
location.href = "./index.html"
}
},1000);
}
//點擊按鈕立即返回首頁
document.getElementsByTagName('button')[0].onclick = function(){
location.href = "./index.html"
}
</script>
</body>
</html>到此，關于“怎么用js實現支付倒計時返回首頁”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
