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

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

在完成某項操作時，按鈕上有個倒計時效果，倒計時結(jié)束后，跳轉(zhuǎn)到新地址，這篇文章主要介紹了JS按鈕倒計時并跳轉(zhuǎn)到新地址,需要的朋友可以參考下

JS按鈕倒計時并跳轉(zhuǎn)到新地址

場景：在完成某項操作時，按鈕上有個倒計時效果，倒計時結(jié)束后，跳轉(zhuǎn)到新地址

效果如下：

實現(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實現(xiàn)點擊按鈕倒計時跳轉(zhuǎn)到其他頁面

用Javascript實現(xiàn)點擊按鈕倒計時跳轉(zhuǎn)到其他頁面

正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教

在光網(wǎng)頁時，我們通常點擊某個按鈕不會立即跳轉(zhuǎn)，而是倒計時，等幾秒鐘之后再進(jìn)行跳轉(zhuǎn)，下面我們用代碼來實現(xiàn) **代碼如下**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>點我跳轉(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>

效果展示：

代碼解釋：
這里我們要改變兩個地方，所以獲取的是按鈕和div
然后當(dāng)我們點擊按鈕時，觸發(fā)點擊事件，讓按鈕變?yōu)椴豢牲c擊，并且倒計時，這樣就可以防止多次快速點擊導(dǎo)致無法進(jìn)行網(wǎng)頁跳轉(zhuǎn)，然后定義一個變量timmer為5。
然后創(chuàng)建一個函數(shù)，然后進(jìn)行判斷倒計時時間是否等于0，如果等于0，那么直接跳轉(zhuǎn)到新頁面新網(wǎng)址，并且將按鈕的狀態(tài)變?yōu)榭牲c擊，文字也改為最開始的文字。如果大于0，按鈕繼續(xù)不可點擊，文字也修改為’還剩’ + timeer + ‘秒’，那么邊修改按鈕下方的文字’寧再’ + timeer + ‘秒跳轉(zhuǎn)’，然后繼續(xù)讓倒計時的時間減少。
然后創(chuàng)建一個定時器，將這個函數(shù)放進(jìn)去，時間間隔設(shè)置為1秒，這樣就實現(xiàn)了這個功能

到此這篇關(guān)于JS按鈕倒計時并跳轉(zhuǎn)到新地址的文章就介紹到這了,更多相關(guān)js按鈕倒計時跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: