实现网页动态标题

最新推荐文章于 2023-11-12 20:52:49 发布

原创最新推荐文章于 2023-11-12 20:52:49 发布 · 761 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

笔记专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了一种使用JavaScript实现网页动态标题的方法，通过CSS隐藏元素和定时器来交替显示两个字符串。代码中定义了两个隐藏的div元素，然后在JavaScript中设置定时器动态改变document.title的内容，实现标题的切换效果。这是一个简单的前端动态效果实现案例。

实现网页动态标题代码如下
css部分

<div style="display:none" id="w">你好呀，欢迎来到老哥脚本！</div>
<div style="display:none" id="m">嘿嘿，有错误请多指教！</div>

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>