基于JS實現(xiàn)01支付后的10秒倒計時
更新時間:2023年03月31日 09:09:08 作者:Ldz123
這是一個通過js實現(xiàn)的支付后的頁面,點擊支付會跳出一個彈窗,提示你是否要確定支付,確定后進入付后界面,該頁面有著10秒倒計時,計時結(jié)束后便會返回原界面,也可以選擇立刻返回,來返回主頁面,這篇文章主要介紹了基于JS實現(xiàn)01支付后的10秒倒計時,需要的朋友可以參考下
這是一個通過js實現(xiàn)的支付后的頁面,點擊支付會跳出一個彈窗,提示你是否要確定支付,確定后進入付后界面,該頁面有著10秒倒計時,計時結(jié)束后便會返回原界面。也可以選擇立刻返回,來返回主頁面<br>第一個zhifu.html頁面<br><!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>支付頁面</title> <style> div { width: 200px; height: 280px; background-color: #eee; padding: 20px; margin: auto; } button { margin: 30px 25px; } </style> </head> <body> <div> <p>商品:web前端課程</p> <p>原價:1980元</p> <p>現(xiàn)價:1.98元</p> <p>內(nèi)容:html、css、JavaScript</p> <p>地址:鄭州升達經(jīng)貿(mào)管理學(xué)院</p> <p> <button>取消</button> <button>支付</button> </p> </div> <script> //點擊支付出現(xiàn)確認框 document.getElementsByTagName('button')[1].onclick = function() { let res = window.confirm('您確認要支付嗎?') if (res) { location.href = './ten.html' } } </script> </body> </html><br>第二個ten.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>10秒倒計時</title> <style> div { margin: 0 auto; width: 500px; } #jumpto { color: red; font-size: 30px; } </style> </head> <body> <div> <h2>恭喜您,支付成功</h2> <span id="jumpto">10</span>秒后自動返回首頁 <p><button>立刻返回</button></p> </div> <script> //加載頁面時,應(yīng)該觸發(fā)定時器時間10s window.onload = function() { let timer = 10; setInterval(() => { timer--; document.getElementById('jumpto').innerHTML = timer; if (timer == 0) { location.href = './zhifu.html'; } }, 1000); } document.getElementsByTagName('button')[0].onclick = function() { location.href = './zhifu.html'; } </script> </body> </html>
到此這篇關(guān)于基于JS實現(xiàn)01支付后的10秒倒計時的文章就介紹到這了,更多相關(guān)js 10秒倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript高級程序設(shè)計 閱讀筆記(十八) js跨平臺的事件
js跨平臺的事件經(jīng)驗分享,需要的朋友可以參考下2012-08-08Javascript 修改String 對象 增加去除空格功能(示例代碼)
這篇文章主要介紹了Javascript 修改String 對象 增加去除空格功能(示例代碼)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11關(guān)于ECharts設(shè)置x軸刻度間隔的兩種方式
這篇文章主要介紹了關(guān)于ECharts設(shè)置x軸刻度間隔的兩種方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02七個基于JavaScript實現(xiàn)的情人節(jié)表白特效
情人節(jié)將至 程序員證明自己不是直男的時候到啦 我們也有自己的專屬代碼浪漫。本文將介紹七個利用JavaScript實現(xiàn)的情人節(jié)表白特效,需要的可以參考一下2022-01-01