2017/04

JS實現(xiàn)倒計時三秒跳轉(zhuǎn)后到新頁面

發(fā)布時間：2017-04-08 17:37:18

發(fā)布者：jiangbing

瀏覽量:

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

1、添加mate

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

2、編寫html提示頁面



  
  
  
  
  
  
  
文匯軟件
  
  
  
  
  
  
  
  
     
      
     
     提示內(nèi)容  
       
        頁面自動  
        跳轉(zhuǎn)  
        等待時間：  
        3

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

3、js實現(xiàn)

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

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

上一篇： css3如何做出齒輪旋轉(zhuǎn)的特效

下一篇：如何用js實現(xiàn)鼠標(biāo)點擊方向鍵的輪播圖？

關(guān)鍵詞:

返回列表

相關(guān)文章

2024-08-02

ThinkPHP路由定義用法以及注意事項查看詳情

2017-07-01

css3如何實現(xiàn)圖片360°旋轉(zhuǎn)效果？查看詳情

相關(guān)案例