網頁標題(title)動態改變

標籤：dex   div   html   輸入   需要   splay   錯誤   length   bug   

這是一隻小白的突發奇想，實驗多次終於有所效果。想要實現什麼效果呢，

：   

要實現這個效果，大體需要兩步。

第一，如何像列印似的一個一個字顯示文字。要實現這個效果有多種方法。在這裡我所運用的是javaScript中的substring()方法

substring()方法是幹嘛的簡單說一下，它用於提取字串中介於兩個指定下標之間的字元。返回的子串包括開始處的字元，但不包括結束處的字元。

 

首先，做幾個div,放你要列印的文字（不一定是div,能取到就行，這個隨意），然後通過節點取到裡面的內容

<div style="display:none" id="w">你好呀，歡迎歡迎，點個贊吧！   </div><div style="display:none" id="m">嘿嘿，有錯誤請多指教！ </div>

var word=document.getElementById("w").innerHTML;var ha=document.getElementById("m").innerHTML;

當然，動態修改title內容也有不同的方法，這裡用的是 document.title="" 直接修改的，從下邊的代碼可以看到，substring()方法從0個字元開始，截取的長度每隔300毫秒加一，就實現了類似列印的效果

var type=setInterval(function(){    document.title=word.substring(0,index++);},300);

 

其實到這裡，大致的效果已經做完了，剩下的只是需要 setInterval()方法與回呼函數的配合，來實現迴圈顯示

綜合JS代碼如下

<script language="javascript">var index=0;var inde=0;var word=document.getElementById("w").innerHTML;var ha=document.getElementById("m").innerHTML;function hh(){    var type=setInterval(function(){        document.title=word.substring(0,index++);        if(index==word.length+1){            clearInterval(type);            index=0;            var ty=setInterval(function(){                document.title=ha.substring(0,inde++);                if(inde==ha.length+1){                        clearInterval(ty);                    inde=0;                    hh();                }            },300);                    }    },300);}setTimeout(hh,2500);</script>        

 

因為是臨時想的，最後還是存在一些小bug.在每次title重新輸入時，會卡頓一下，閃爍一下預設的地址，在這虛心求大神指點。

 

炎炎夏日，敲代碼之餘還要遭受秀恩愛的成噸傷害，在這誠心求職一份=。=看不見恩愛就沒有傷害

 

網頁標題(title)動態改變