JS實現倒計時三秒跳轉后到新頁面

發布時間：2017-04-08 17:37:18

發布者：jiangbing

瀏覽量:

為了使網站的頁面更友好，更加人性化，我們往往會在操作錯誤或是成功的時候進行提示然后跳轉到相應的頁面。同時為了使頁面更加美化，我們往往會加上倒計時跳轉功能，也就是使網頁上的秒殺呈現倒數顯示。下面就是具體的實現過程。

1、添加mate

這個mate的功能就是實現跳轉，content中的內容3就是三秒后跳轉，url就是所要跳轉的地址。光有這些還不夠，我們只知道三秒后跳轉了，但是在頁面上看不到，這時我們就要在頁面上顯示出倒計時功能，這也就用到了JS。

2、編寫html提示頁面

頁面的樣式最好自己設計一個符合審美觀的，這樣的html頁面寫起來都比較簡單。頁面寫好之后就是如何在頁面上實現倒計時顯示了。

3、js實現

  
    $(function() {  
        var wait = $(".second").html();  
        timeOut();  
        /**  
         * 實現倒計時  
         */  
        function timeOut() {  
            if(wait != 0) {  
                setTimeout(function() {  
                    $('.second').text(--wait);  
                    timeOut();  
                }, 1000);  
            }  
        }  
    });

將此段js代碼加入到上述html頁面中即可。這樣就完美的實現了倒計時三秒之后跳轉到新頁面。

上一篇： css3如何做出齒輪旋轉的特效

下一篇：如何用js實現鼠標點擊方向鍵的輪播圖？

關鍵詞: