js實(shí)現(xiàn)支付倒計(jì)時(shí)返回首頁(yè)
支付倒計(jì)時(shí)返回首頁(yè)案例簡(jiǎn)介:在首頁(yè)綁定一個(gè)按鈕跳轉(zhuǎn)到另一個(gè)頁(yè)面,用到了簡(jiǎn)單的js語(yǔ)法,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;
}
h2{
text-align: center;
}
button{
text-align: center;
margin-left: 68px;
}
</style>
</head>
<body>
<div class="wrapper">
<h2>商品:smile</h2>
<h2>價(jià)格:infinity</h2>
<h2>支付方式:Net</h2>
<h2>訂單號(hào):123456789</h2>
<button>取消</button>
<button>支付</button>
</div>
<script>
//邏輯:點(diǎn)擊支付按鈕進(jìn)行跳轉(zhuǎn)頁(yè)面
//獲得第二個(gè)(第一個(gè)是0)標(biāo)簽名為'button'的標(biāo)簽添加點(diǎn)擊事件并且綁定一個(gè)函數(shù)
document.getElementsByTagName('button')[1].onclick = function(){
//跳轉(zhuǎn)前的確認(rèn)框
let res = window.confirm('請(qǐng)確認(rèn)支付');
//判斷是否為真,為真跳轉(zhuǎn)
if(res){
//直接使用目錄下的html頁(yè)面,也可輸入其他網(wǎng)站鏈接
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">
<h2>支付成功</h2>
<span id="countDown">10</span>秒后返回首頁(yè)
<button>立即返回</button>
</div>
</div>
<script>
//邏輯:頁(yè)面打開(kāi),開(kāi)始倒計(jì)時(shí)
window.onload = function(){
//先賦值
let timer = 10;
//倒計(jì)時(shí)
//箭頭函數(shù)()=>{} == function(){}
setInterval(()=>{
timer--;
document.getElementById('countDown').innerText = timer;
//等于0時(shí)跳轉(zhuǎn)首頁(yè)
if(timer==0){
location.href = "./index.html"
}
},1000);
}
//點(diǎn)擊按鈕立即返回首頁(yè)
document.getElementsByTagName('button')[0].onclick = function(){
location.href = "./index.html"
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序移動(dòng)拖拽視圖-movable-view實(shí)例詳解
這篇文章主要介紹了微信小程序移動(dòng)拖拽視圖-movable-view的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
js實(shí)現(xiàn)九宮格的隨機(jī)顏色跳轉(zhuǎn)
本篇文章主要介紹了js實(shí)現(xiàn)九宮格的隨機(jī)顏色跳轉(zhuǎn)的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
比較全面的event對(duì)像在IE與FF中的區(qū)別 推薦
整理的比較全的event對(duì)像在ie與firefox瀏覽器中的區(qū)別。2009-09-09
一文讀懂JS中的var/let/const和暫時(shí)性死區(qū)
這篇文章主要為大家詳細(xì)介紹了JavaScript中的var、let、const和暫時(shí)性死區(qū)的異同,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-02-02
clipboard.js無(wú)需Flash無(wú)需依賴任何JS庫(kù)實(shí)現(xiàn)文本復(fù)制與剪切
這篇文章主要實(shí)現(xiàn)了無(wú)需Flash無(wú)需依賴任何JS庫(kù)實(shí)現(xiàn)文本復(fù)制與剪切,是一款極現(xiàn)代的,不需要flash,不依賴任何其他js庫(kù)的非常小的插件,叫clipboard.js,感興趣的小伙伴們可以參考一下2015-10-10
js使用generator函數(shù)同步執(zhí)行ajax任務(wù)
這篇文章主要為大家詳細(xì)介紹了js使用generator函數(shù)同步執(zhí)行ajax任務(wù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
JavaScript中內(nèi)置函數(shù)Map()的使用
Map()是JavaScript中內(nèi)置的一種數(shù)據(jù)結(jié)構(gòu),它允許您將鍵值對(duì)映射到任意類型的值,主要介紹了JavaScript中內(nèi)置函數(shù)Map()的使用,感興趣的可以了解一下2023-05-05

