JS特效-浏览器标题栏闪烁使用JavaScript制作浏览器标题栏闪烁效果，以面向对象的方式方式封装了JS。当你遭遇
JS特效-浏览器标题栏闪烁
使用JavaScript制作浏览器标题栏闪烁效果，以面向对象的方式方式封装了JS。当你遭遇了Backbone，就会习惯JS也面向对象，也会习惯JS也MVC分离。就像这种JS风格，我喜欢。扯远了，呵呵。
不废话了，直接贴代码。
?
<html><head><title>JS效果-浏览器标题栏闪烁</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript"> // 使用message对象封装消息var message={ time: 0, title: document.title, timer: null, // 显示新消息提示 show:function(){ var title = message.title.replace("【 】", "").replace("【新消息】", "");// 定时器，设置消息切换频率闪烁效果就此产生 message.timer = setTimeout(function() { message.time++;message.show(); if (message.time % 2 == 0) { document.title = "【新消息】" + title }else{ document.title = "【 】" + title }; }, 600 // 闪烁时间差); return [message.timer, message.title]; }, // 取消新消息提示 clear: function(){ clearTimeout(message.timer); document.title = message.title; } }; message.show(); // 页面加载时绑定点击事件，单击取消闪烁提示function bind() {document.onclick = function(){message.clear(); }; } </script></head><body onload="bind();">点击页面取消消息闪烁提示</body></html>?
?
<span style="font-size: medium;"><html><head><title>JS效果-浏览器标题栏闪烁</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript"> // 使用message对象封装消息var message = {time : 1,defaultTitle : document.title,timer : null,// 显示新消息提示show : function() {message.time++;document.title=message.time%2==0?"【新消息】":"【 】";document.title+=message.defaultTitle;if (!message.timer) {message.timer = setInterval("message.show()", 600);}},// 取消新消息提示clear : function() {clearInterval(message.timer);document.title = message.defaultTitle;}};message.show(); // 页面加载时绑定点击事件，单击取消闪烁提示function bind() {document.onclick = function(){message.clear(); }; } </script></head><body onload="bind();">点击页面取消消息闪烁提示</body></html></span>我帮你修改了一下。<span style="font-size: medium;"><html><head><title>JS效果-浏览器标题栏闪烁</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript"> // 使用message对象封装消息var message = {time : 1,defaultTitle : document.title,timer : null,// 显示新消息提示show : function() {message.time++;document.title=message.time%2==0?"【新消息】":"【 】";document.title+=message.defaultTitle;if (!message.timer) {message.timer = setInterval("message.show()", 600);}},// 取消新消息提示clear : function() {clearInterval(message.timer);document.title = message.defaultTitle;}};message.show(); // 页面加载时绑定点击事件，单击取消闪烁提示function bind() {document.onclick = function(){message.clear(); }; } </script></head><body onload="bind();">点击页面取消消息闪烁提示</body></html></span>
我帮你修改了一下。
感谢你的帮忙，这个容易理解多了，比之前的递归调用自身setTimeout，还有“return [message.timer, message.title];”容易看懂。 10 楼 z2009zxiaolong 2012-09-05 bolo 写道我想问下，你这个setTimeout为什么可以不停的执行呢？这个函数不是在某个时间点后执行一次的吗？return [message.timer, message.title];返回这个是干什么的？
确实不好理解，第一个问题请看7楼吧，因为是递归调用，返回值是给对象自身的属性，message.timer返回给message的timer属性，message.title是同样的，然后又在19行开始调用message.timer。 11 楼 fffddd 2012-09-07 z2009zxiaolong 写道bolo 写道我想问下，你这个setTimeout为什么可以不停的执行呢？这个函数不是在某个时间点后执行一次的吗？return [message.timer, message.title];返回这个是干什么的？
确实不好理解，第一个问题请看7楼吧，因为是递归调用，返回值是给对象自身的属性，message.timer返回给message的timer属性，message.title是同样的，然后又在19行开始调用message.timer。
z2009zxiaolong 写道mfkvfn 写道要用setInterval吧。你确信setTimeout可以？
当然可以，发布代码之前肯定要经过测试。你看第22行“message.show();”，递归调用了自身，所以setTimeout的效果跟setInterval是一样的。
setTimeout和setInterval当然不一样。虽然在这里你说的“效果”一样了。你没有想过既然setTimeout就可以了，哪怎么会有setInterval函数呢？
你看看资源就知道了。你每调用setTimeout一次就新生成了一个message.timer,这是对浏览器资源的一种浪费，希望不要误导新人。