網頁標題(title)動態改變

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

如圖所示 ：

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

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

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

首先，做幾個div,放你要列印的文字（不一定是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代碼如下

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

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！