JS按鈕倒計(jì)時(shí)并跳轉(zhuǎn)到新地址的實(shí)現(xiàn)代碼

更新時(shí)間：2023年02月06日 16:02:04 作者：前端-文龍剛

在完成某項(xiàng)操作時(shí)，按鈕上有個(gè)倒計(jì)時(shí)效果，倒計(jì)時(shí)結(jié)束后，跳轉(zhuǎn)到新地址，這篇文章主要介紹了JS按鈕倒計(jì)時(shí)并跳轉(zhuǎ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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: