提醒:本文最后更新于 3222 天前,文中所描述的信息可能已发生改变,请仔细核实。
如题,因为Chatbox写了个对象。。。好吧,写了个Object:
var changeTitle = { time: 0, originTitle: document.title, timer: null, change: function() { document.title = "~New Message Received~ " + changeTitle.originTitle; }, notify: function() { if(document.title.indexOf("~New Message Received~")) clearTimeout(changeTitle.timer); document.title = "~New Message Received~ " + changeTitle.originTitle; changeTitle.timer = setTimeout(function(){changeTitle.clear();},3000); }, flash: function() { changeTitle.timer = setTimeout(function () { changeTitle.time++; changeTitle.flash(); if (changeTitle.time % 2 === 0) { document.title = "~ ~ " + changeTitle.originTitle; }else{ document.title = "~New Message Received~ " + changeTitle.originTitle; } }, 500); }, reset: function() { clearTimeout(changeTitle.timer); document.title = changeTitle.originTitle; } };
通过以下方法可以调用:
changeTitle.change();//更改标题 changeTitle.notify();//更改标题3秒后恢复 changeTitle.flash();//闪烁标题 changeTitle.reset();//复位标题
通过监听visibilitychange,你可以完成一些有意思的动作,比如进入和离开页面时改变标题(具体应该说标签为非前置状态时改变标题,标签前置状态时改变标题):
var changeTitle={time:0,originTitle:document.title,timer:null,change:function(){document.title="~New Message Received~ "+changeTitle.originTitle},notify:function(){if(document.title.indexOf("~New Message Received~"))clearTimeout(changeTitle.timer);document.title="~New Message Received~ "+changeTitle.originTitle;changeTitle.timer=setTimeout(function(){changeTitle.reset()},3000)},flash:function(){changeTitle.timer=setTimeout(function(){changeTitle.time++;changeTitle.flash();if(changeTitle.time%2===0){document.title="~ ~ "+changeTitle.originTitle}else{document.title="~New Message Received~ "+changeTitle.originTitle}},500)},reset:function(){clearTimeout(changeTitle.timer);document.title=changeTitle.originTitle}}; document.addEventListener('visibilitychange', function() { if (document.hidden) { changeTitle.flash(); } else { changeTitle.reset(); } });
上述例子,为方便显示把changeTitle对象压缩了。
最后,为情人节干杯。
转载请注明转自:kn007的个人博客的《js改变浏览器标签标题》
如果是手机浏览器,基本起不了作用。
@milk: 还真没考虑手机 手机最好用移动端主题或客户端
@kn007: 个人博客又不是维基百科,专门下载客户端的读者可能会很少吧。
@kn007:
@milk: 恩是的,所以在手机上也可以通过网页。
话说上次差点被这个网站的标题给萌翻了~
https://blog.lwl12.com/
@Jerry Qu: 他啊,笑~
Repo里加了个beta版,欢迎试用~
@ArchiTech: 我昨晚就看到了,看到Admin大改版
太技术了,就不学了吧。
@沉鱼落雁随笔:
玩代码有时候很兴奋,呵呵,尤其是你想折腾某个效果。
@郑永: 嗯