js實現(xiàn)支付倒計時返回首頁
更新時間：2021年10月26日 17:07:24 作者：itsruaC
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)支付倒計時返回首頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
支付倒計時返回首頁案例簡介：在首頁綁定一個按鈕跳轉(zhuǎn)到另一個頁面，用到了簡單的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;
}
h2{
text-align: center;
}
button{
text-align: center;
margin-left: 68px;
}
</style>
</head>
<body>
<div class="wrapper">
<h2>商品:smile</h2>
<h2>價格:infinity</h2>
<h2>支付方式:Net</h2>
<h2>訂單號:123456789</h2>
<button>取消</button>
<button>支付</button>
</div>
<script>
//邏輯:點擊支付按鈕進(jìn)行跳轉(zhuǎn)頁面
//獲得第二個(第一個是0)標(biāo)簽名為'button'的標(biāo)簽添加點擊事件并且綁定一個函數(shù)
document.getElementsByTagName('button')[1].onclick = function(){
//跳轉(zhuǎn)前的確認(rèn)框
let res = window.confirm('請確認(rèn)支付');
//判斷是否為真,為真跳轉(zhuǎn)
if(res){
//直接使用目錄下的html頁面,也可輸入其他網(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>秒后返回首頁
<button>立即返回</button>
</div>
</div>
<script>
//邏輯:頁面打開,開始倒計時
window.onload = function(){
//先賦值
let timer = 10;
//倒計時
//箭頭函數(shù)()=>{} == function(){}
setInterval(()=>{
timer--;
document.getElementById('countDown').innerText = timer;
//等于0時跳轉(zhuǎn)首頁
if(timer==0){
location.href = "./index.html"
}
},1000);
}
//點擊按鈕立即返回首頁
document.getElementsByTagName('button')[0].onclick = function(){
location.href = "./index.html"
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中三種非破壞性處理數(shù)組的方法比較
在這篇文章中，我們將會探索處理數(shù)組的三種方法：for…of循環(huán)、數(shù)組方法.reduce()和數(shù)組方法.flatMap()，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2023-06-06
淺談javascript中的instanceof和typeof
這篇文章主要簡單介紹了javascript中的instanceof和typeof的相關(guān)資料,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了基于Fixed定位的框選功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了JavaScript實現(xiàn)圖像模糊化的方法,文中先進(jìn)行簡單介紹，而后給出了完整的實例代碼，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
layui 實現(xiàn)table翻頁滾動條位置保持不變的例子
今天小編就為大家分享一篇layui 實現(xiàn)table翻頁滾動條位置保持不變的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法
在開發(fā)一個前端項目時需要用到Element-ui的el-tabs組件和Echart開源庫,當(dāng)兩者嵌套使用時,我給Echart中的圖表寬度設(shè)置為了100%,但是實際的寬度卻只有100px,這篇文章主要給大家介紹了關(guān)于echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了WEEX環(huán)境搭建與入門詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
javacript replace 正則取字符串中的值并替換【推薦】
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串。這篇文章主要介紹了javacript replace 正則取字符串中的值并替換,需要的朋友可以參考下2018-09-09
JavaScript之排序函數(shù)_動力節(jié)點Java學(xué)院整理
排序也是在程序中經(jīng)常用到的算法。這篇文章主要介紹了JavaScript之排序函數(shù)，有興趣的可以了解一下
2017-06-06