網頁標題(title)動態改變

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

如圖所示 ：   

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

第一，如何像打印似的一個一個字顯示文字。要實現這個效果有多種方法。在這里我所運用的是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重新輸入時，會卡頓一下，閃爍一下默認的地址，在這虛心求大神指點。

 

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