JS實(shí)現(xiàn)倒計(jì)時(shí)三秒跳轉(zhuǎn)后到新頁(yè)面

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

發(fā)布者：jiangbing

瀏覽量:

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

1、添加mate

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

2、編寫html提示頁(yè)面



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

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

3、js實(shí)現(xiàn)

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

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

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

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

關(guān)鍵詞: