javaScript實現(xiàn)支付10秒倒計時
本文實例為大家分享了javaScript實現(xiàn)支付10秒倒計時的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下:
這個案例其實很簡單,只要掌握了js基礎(chǔ)中的onclick函數(shù)以及定時器的使用,就能快速的做出這樣的效果,讓我們一起來看看怎么做吧~
首先需要兩個html文件,在兩個文件中利用html和css分別寫好初始頁面效果,在這里就不多說啦,具體可以看下面的代碼
讓我們來談?wù)?strong>js需要做出的效果:
1、在頁面1中點(diǎn)擊支付要跳轉(zhuǎn)到另一個文件中
2、剛進(jìn)入頁面2時要開始計時10秒,計時結(jié)束后返回頁面1
3、點(diǎn)擊頁面2的立即返回能夠返回到頁面1
這就是我們需要做的效果
那我們要如何實現(xiàn)在兩個頁面之間的跳轉(zhuǎn)呢?
=> 利用onclick
和location.href="url" rel="external nofollow"
,在鼠標(biāo)點(diǎn)擊時改變location.href
(此處的url是指你所存放的另一個html文件的位置)
計時效果就很簡單啦,利用setInterval
使元素的innerText
改變就可以了,當(dāng)數(shù)字等于0時,同樣改變location,使其頁面跳轉(zhuǎn)
代碼如下:
頁面1:
<!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> #btn{ display: block; margin:130px auto; width: 300px; height: 100px; font-size:30px; } </style> </head> <body> <button id="btn">支付</button> <script> let btn=document.getElementById("btn"); btn.onclick=function(){ let con=window.confirm("您確定嗎?"); if(con){ location.href='./支付.html'; } } </script> </body> </html>
頁面2:
<!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> #spa { font-size: 20px; color: red; } #total { width: 200px; height: 200px; background-color: rgba(169, 169, 169, 0.315); margin: 40px auto; border-radius: 20px; padding: 20px; position: flex; flex-direction: column; text-align: center; } #total h3 { padding-top: 20px; } #total button { margin-top: 30px } </style> </head> <body> <div id="total"> <h3>恭喜您,支付成功!</h3> <div> <span id="spa">10</span> <span>秒后自動返回首頁</span> </div> <button id="btn">立即返回</button> </div> <script> var spa = document.getElementById("spa"); let t = 10; setInterval(() => { t--; spa.innerText = t; if (t == 0) { location.href = "./支付10秒鐘.html"; } }, 400); var btn=document.getElementById("btn"); btn.onclick=function(){ location.href="./支付10秒鐘.html" rel="external nofollow" } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)將xml轉(zhuǎn)換成html table表格的方法
這篇文章主要介紹了JavaScript實現(xiàn)將xml轉(zhuǎn)換成html table表格的方法,實例分析了javascript操作XML文件與table表格的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04JavaScript遍歷數(shù)組和對象的元素簡單操作示例
這篇文章主要介紹了JavaScript遍歷數(shù)組和對象的元素簡單操作,結(jié)合實例形式分析了javascript數(shù)組與對象元素遍歷相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-07-07JavaScript/TypeScript 實現(xiàn)并發(fā)請求控制的示例代碼
這篇文章主要介紹了JavaScript/TypeScript 實現(xiàn)并發(fā)請求控制,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01JavaScript中鏈?zhǔn)秸{(diào)用之研習(xí)
方法鏈一般適合對一個對象進(jìn)行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量,缺點(diǎn)是它占用了函數(shù)的返回值。2011-04-04