快捷導(dǎo)航

JavaScript實(shí)現(xiàn)一個(gè)多少秒后自動(dòng)跳轉(zhuǎn)的頁(yè)面(案例代碼)

更新時(shí)間：2023年01月16日 10:24:06 作者：小楊不香菜

最近遇到這樣一個(gè)需求是用js簡(jiǎn)單實(shí)現(xiàn)一個(gè)多少秒后自動(dòng)跳轉(zhuǎn)的頁(yè)面，實(shí)現(xiàn)代碼非常簡(jiǎn)單，對(duì)js自動(dòng)跳轉(zhuǎn)頁(yè)面相關(guān)知識(shí)感興趣的朋友一起看看吧

JavaScript實(shí)現(xiàn)一個(gè)多少秒后自動(dòng)跳轉(zhuǎn)的頁(yè)面

要求用js簡(jiǎn)單實(shí)現(xiàn)一個(gè)多少秒后自動(dòng)跳轉(zhuǎn)的頁(yè)面

效果是這樣的

在這里插入圖片描述

不多說(shuō)，上代碼。

這是HTML代碼部分。

 <div class="box">
        <h3>支付成功</h3>
        <a  rel="external nofollow" >
            <span id="num">3</span>
            <span>秒后自動(dòng)跳轉(zhuǎn)</span>
        </a>
    </div>

這是JS代碼部分。

<script>
        function jump() {
            var time = document.getElementById('num');
            var _num = time.innerHTML;
            if (_num > 0) {
                _num--;
                time.innerHTML = _num;
            } else {
                location.assign("https://blog.csdn.net/Quentin0823/article/details/123184824?spm=1001.2014.3001.5502")
            }
        }
        setInterval(jump, 1000)
    </script>

要實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)，就能知道需要用到setTimeout()來(lái)實(shí)現(xiàn)計(jì)時(shí)，還需要能夠跳轉(zhuǎn)，要用到location.assign()。首先想到的大概就是一下幾步

編寫定時(shí)跳轉(zhuǎn)的HTML頁(yè)面
獲取指定的秒數(shù)，并減1寫入頁(yè)面
當(dāng)秒數(shù)大于0時(shí)，利用 setTimeout() 循環(huán)倒計(jì)時(shí)。
當(dāng)秒數(shù)小于等于0時(shí)，利用 location.assign（）跳轉(zhuǎn)到指定的URL地址中。

最主要的還是方法和思路吧！可能代碼優(yōu)化的不太夠，希望能有所幫助，大家有更好的寫法也可以分享出來(lái)，共同學(xué)習(xí)，共同進(jìn)步吖~

PS：js實(shí)現(xiàn)幾秒倒計(jì)時(shí)之后自動(dòng)跳轉(zhuǎn)頁(yè)面

點(diǎn)擊按鈕之后自動(dòng)跳轉(zhuǎn)到百度

<!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>Document</title>
</head>
 
<body>
    <button>跳轉(zhuǎn)百度</button>
    <div></div>
 
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div')
            btn.addEventListener('click', function() {
                var times = 5;
                setInterval(function() {
                    if (times == 0) {
                        location.;
                        times = 5;
                    } else {
                        div.innerHTML = '還剩' + times + '秒自動(dòng)跳轉(zhuǎn)'
                        times--;
                    }
 
            }, 1000)
        })
        // 五秒后直接跳轉(zhuǎn)
        var times = 5
        setInterval(function() {
            if (times == 0) {
                location.;
                times = 5;
            } else {
                div.innerHTML = '還剩' + times + '秒自動(dòng)跳轉(zhuǎn)'
                times--;
            }
 
        }, 1000)
    </script>
</body>
 
</html>

到此這篇關(guān)于js實(shí)現(xiàn)一個(gè)多少秒后自動(dòng)跳轉(zhuǎn)的頁(yè)面的文章就介紹到這了,更多相關(guān)js自動(dòng)跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: