利用js动态修改网站的title,挺好玩的,需要的拿走

  • 内容
  • 相关

有意思的网页标题(title)动态改变

好玩的动态改变title一:

当你点走浏览其他的网页(非当前网页)时,title就会变成“记得回来哦~v~”,当你点回来时,它就自己又变回来了,也挺有意思的。

/* js动态修改title */
    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState == 'hidden') {
            normal_title = document.title;
            document.title = '记得回来哦~v~';
        } else {
            document.title = normal_title;
        }
    });

好玩的动态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代码如下

<div style="display:none" id="w">你好呀,欢迎欢迎,点个赞吧!   </div>
<div style="display:none" id="m">嘿嘿,有错误请多指教! </div>
<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重新输入时,会卡顿一下,闪烁一下默认的地址,在这虚心求大神指点。

文章转载自:https://www.cnblogs.com/cherishli/p/7040343.html

以后如果再找到更好玩的title改变的,我会继续往下续写!!!尽请期待吧

< 六十二博客 >

本文标签:

版权声明: 若无特殊注明,本文皆为《 六十二丶 》原创,转载请保留文章出处。

本文链接: 利用js动态修改网站的title,挺好玩的,需要的拿走 》 - https://prm612.top/post-27.html

解压说明: 如本站部分资源使用时需输入解压密码,本站所有资源的解压密码均默认为: prm612

收录情况: 百度暂未收录

站长QQ: 597782047 点击这里给我发消息 本网站的资源部分来源于网络,如有侵权,请 联系站长 进行删除处理。

本站留言 - 投诉建议: Email:597782047@qq.com 链接失效?( 点击提交 )请说明失效链接地址+名称

本站网址: https://prm612.top/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知

正在加载...

点击↑关闭 2019年,祝大家
“诸”事吉祥!
网站备案相关信息
域名
主办方名称
主办单位性质
主体备案号
ICP备案号
首页地址 https://prm612.top/ [备案查询]
网站名称
审核时间