网页标题(title)动态改变

Posted 2020-09-23 Cherish李

想起剧情发展类游戏对话框的种文字单个蹦的显示方式，又看到一成不变的title，就尝试了一下。有兴趣的可以看一下。 炎炎夏日，希望各位coding能心平气和，迎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重新输入时，会卡顿一下，闪烁一下默认的地址，在这虚心求大神指点。

 

炎炎夏日，敲代码之余还要遭受秀恩爱的成吨伤害，在这诚心求职一份=。=看不见恩爱就没有伤害