js實(shí)現(xiàn)支付倒計(jì)時(shí)返回首頁
支付倒計(jì)時(shí)返回首頁案例簡介:在首頁綁定一個(gè)按鈕跳轉(zhuǎn)到另一個(gè)頁面,用到了簡單的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>價(jià)格:infinity</h2> <h2>支付方式:Net</h2> <h2>訂單號(hào):123456789</h2> <button>取消</button> <button>支付</button> </div> <script> //邏輯:點(diǎn)擊支付按鈕進(jìn)行跳轉(zhuǎn)頁面 //獲得第二個(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頁面,也可輸入其他網(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> //邏輯:頁面打開,開始倒計(jì)時(shí) window.onload = function(){ //先賦值 let timer = 10; //倒計(jì)時(shí) //箭頭函數(shù)()=>{} == function(){} setInterval(()=>{ timer--; document.getElementById('countDown').innerText = timer; //等于0時(shí)跳轉(zhuǎn)首頁 if(timer==0){ location.href = "./index.html" } },1000); } //點(diǎn)擊按鈕立即返回首頁 document.getElementsByTagName('button')[0].onclick = function(){ location.href = "./index.html" } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序移動(dòng)拖拽視圖-movable-view實(shí)例詳解
這篇文章主要介紹了微信小程序移動(dòng)拖拽視圖-movable-view的實(shí)例代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08js實(shí)現(xiàn)九宮格的隨機(jī)顏色跳轉(zhuǎn)
本篇文章主要介紹了js實(shí)現(xiàn)九宮格的隨機(jī)顏色跳轉(zhuǎn)的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧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-02clipboard.js無需Flash無需依賴任何JS庫實(shí)現(xiàn)文本復(fù)制與剪切
這篇文章主要實(shí)現(xiàn)了無需Flash無需依賴任何JS庫實(shí)現(xiàn)文本復(fù)制與剪切,是一款極現(xiàn)代的,不需要flash,不依賴任何其他js庫的非常小的插件,叫clipboard.js,感興趣的小伙伴們可以參考一下2015-10-10js使用generator函數(shù)同步執(zhí)行ajax任務(wù)
這篇文章主要為大家詳細(xì)介紹了js使用generator函數(shù)同步執(zhí)行ajax任務(wù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09JavaScript中內(nèi)置函數(shù)Map()的使用
Map()是JavaScript中內(nèi)置的一種數(shù)據(jù)結(jié)構(gòu),它允許您將鍵值對(duì)映射到任意類型的值,主要介紹了JavaScript中內(nèi)置函數(shù)Map()的使用,感興趣的可以了解一下2023-05-05