亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論