JS按鈕倒計(jì)時(shí)并跳轉(zhuǎn)到新地址的實(shí)現(xiàn)代碼
JS按鈕倒計(jì)時(shí)并跳轉(zhuǎn)到新地址
場(chǎng)景:在完成某項(xiàng)操作時(shí),按鈕上有個(gè)倒計(jì)時(shí)效果,倒計(jì)時(shí)結(jié)束后,跳轉(zhuǎn)到新地址
效果如下:
實(shí)現(xiàn)代碼:
<a class="backUpPage" href="javascript:void(0);" rel="external nofollow" ><span></span>秒后 返回</a>
$(function () { var time = 5 $('.backUpPage span').html(time) var timeFn = setInterval(function(){ time-- $('.backUpPage span').html(time) if(time==0){ clearTimeout(timeFn) window.location = 'http://www.baidu.com/' } },1000) })
補(bǔ)充:用Javascript實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)跳轉(zhuǎn)到其他頁(yè)面
用Javascript實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時(shí)跳轉(zhuǎn)到其他頁(yè)面
正在學(xué)習(xí)大前端中,有代碼和思路不規(guī)范不正確的地方往多多包涵,感謝指教
在光網(wǎng)頁(yè)時(shí),我們通常點(diǎn)擊某個(gè)按鈕不會(huì)立即跳轉(zhuǎn),而是倒計(jì)時(shí),等幾秒鐘之后再進(jìn)行跳轉(zhuǎn),下面我們用代碼來(lái)實(shí)現(xiàn) **代碼如下**
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>點(diǎn)我跳轉(zhuǎn)</button> <div></div> <script> var div=document.querySelector('div') var btn=document.querySelector('button') btn.addEventListener('click',function () { var timeer = 5 btn.disabled=true x() setInterval(x,1000) function x() { if (timeer == 0) { btn.disabled=false location. } else { btn.innerHTML = '還剩' + timeer + '秒' div.innerHTML = '寧再' + timeer + '秒跳轉(zhuǎn)' timeer-- } } }) </script> </body> </html>
效果展示:
代碼解釋:
這里我們要改變兩個(gè)地方,所以獲取的是按鈕和div
然后當(dāng)我們點(diǎn)擊按鈕時(shí),觸發(fā)點(diǎn)擊事件,讓按鈕變?yōu)椴豢牲c(diǎn)擊,并且倒計(jì)時(shí),這樣就可以防止多次快速點(diǎn)擊導(dǎo)致無(wú)法進(jìn)行網(wǎng)頁(yè)跳轉(zhuǎn),然后定義一個(gè)變量timmer為5。
然后創(chuàng)建一個(gè)函數(shù),然后進(jìn)行判斷倒計(jì)時(shí)時(shí)間是否等于0,如果等于0,那么直接跳轉(zhuǎn)到新頁(yè)面新網(wǎng)址,并且將按鈕的狀態(tài)變?yōu)榭牲c(diǎn)擊,文字也改為最開(kāi)始的文字。如果大于0,按鈕繼續(xù)不可點(diǎn)擊,文字也修改為’還剩’ + timeer + ‘秒’,那么邊修改按鈕下方的文字’寧再’ + timeer + ‘秒跳轉(zhuǎn)’,然后繼續(xù)讓倒計(jì)時(shí)的時(shí)間減少。
然后創(chuàng)建一個(gè)定時(shí)器,將這個(gè)函數(shù)放進(jìn)去,時(shí)間間隔設(shè)置為1秒,這樣就實(shí)現(xiàn)了這個(gè)功能
到此這篇關(guān)于JS按鈕倒計(jì)時(shí)并跳轉(zhuǎn)到新地址的文章就介紹到這了,更多相關(guān)js按鈕倒計(jì)時(shí)跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS+HTML5實(shí)現(xiàn)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)按鈕
- JS實(shí)現(xiàn)的倒計(jì)時(shí)恢復(fù)按鈕點(diǎn)擊功能【可用于協(xié)議閱讀倒計(jì)時(shí)】
- Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡(jiǎn)單方法
- JS實(shí)現(xiàn)發(fā)送短信驗(yàn)證后按鈕倒計(jì)時(shí)功能(防止刷新倒計(jì)時(shí)失效)
- 點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)
- js代碼實(shí)現(xiàn)點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)
- JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)
相關(guān)文章
解決layui中onchange失效以及form動(dòng)態(tài)渲染失效的問(wèn)題
今天小編就為大家分享一篇解決layui中onchange失效以及form動(dòng)態(tài)渲染失效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09基于JS實(shí)現(xiàn)頁(yè)面懸浮框的實(shí)例代碼
這篇文章主要介紹了基于JS實(shí)現(xiàn)頁(yè)面懸浮框的實(shí)例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12原生JS實(shí)現(xiàn)隱藏顯示圖片 JS實(shí)現(xiàn)點(diǎn)擊切換圖片效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)隱藏顯示圖片,JS實(shí)現(xiàn)點(diǎn)擊切換圖片效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07js位運(yùn)算在實(shí)際中使用的實(shí)例教程
我們可能很少在編程中用位運(yùn)算,如果沒(méi)深入學(xué)習(xí),可能也很難理解,下面這篇文章主要給大家介紹了關(guān)于js位運(yùn)算在實(shí)際中使用的相關(guān)資料,需要的朋友可以參考下2022-03-03js+html+css實(shí)現(xiàn)鼠標(biāo)移動(dòng)div實(shí)例
移動(dòng)div對(duì)于很多的網(wǎng)有們來(lái)說(shuō)是一件很熟悉的事了,本文老生長(zhǎng)談,用js實(shí)現(xiàn)鼠標(biāo)移動(dòng)div,希望大伙們可以舉一反三,感興趣的朋友可以參考下,或許本文對(duì)你有所幫助2013-01-01Bootstrap~多級(jí)導(dǎo)航(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)效果【附代碼】
下面小編就為大家分享一篇Bootstrap~多級(jí)導(dǎo)航(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)效果【附代碼】。小編覺(jué)得挺不錯(cuò)。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-03-03Object的相關(guān)方法 和 js遍歷對(duì)象的常用方法總結(jié)
這篇文章主要介紹了Object的相關(guān)方法 和 js遍歷對(duì)象的常用方法,結(jié)合實(shí)例形式總結(jié)分析了Object對(duì)象操作的操作方法與js遍歷的三種常用方法,需要的朋友可以參考下2023-05-05JS彈窗 JS彈出DIV并使整個(gè)頁(yè)面背景變暗功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS彈窗 JS彈出DIV并使整個(gè)頁(yè)面背景變暗功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-04-04微信小程序前后端數(shù)據(jù)交互的詳細(xì)圖文教程
這篇文章主要給大家介紹了關(guān)于微信小程序前后端數(shù)據(jù)交互的相關(guān)資料,通過(guò)小程序向后端發(fā)送請(qǐng)求,然后后端從數(shù)據(jù)庫(kù)獲取車源和求購(gòu)的數(shù)量反饋給小程序,最后將這兩個(gè)數(shù)據(jù)顯示出來(lái),需要的朋友可以參考下2022-10-10