实现网页动态标题

grkcsdn

于 2021-07-07 10:52:48 发布

阅读量727

点赞数

分类专栏：笔记文章标签： javascript css

本文链接：https://blog.csdn.net/grkcsdn/article/details/118542080

版权

笔记专栏收录该内容

13 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现网页动态标题代码如下
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>