JS特效-浏览器标题栏闪耀-JavaSript-爱易网页

JS特效-浏览器标题栏闪耀

日期：2014-05-16　浏览次数：20339 次

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>

1 楼 zjhlht 2012-09-04

更喜欢你扯远了的那些话！支持一下

2 楼 z2009zxiaolong 2012-09-04

zjhlht 写道

更喜欢你扯远了的那些话！支持一下

不过像我这种码农，不喜欢废话，就直接帖代码了。

3 楼 fffddd 2012-09-05

<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>

我帮你修改了一下。

4 楼 bolo 2012-09-05

我想问下，你这个setTimeout为什么可以不停的执行呢？这个函数不是在某个时间点后执行一次的吗？return [message.timer, message.title];返回这个是干什么的？

5 楼 sky_lichao 2012-09-05

这个不错，但我想知道怎么人为控制它的开始呢

6 楼 mfkvfn 2012-09-05

要用setInterval吧。你确信setTimeout可以？

7 楼 z2009zxiaolong 2012-09-05

mfkvfn 写道

要用setInterval吧。你确信setTimeout可以？

当然可以，发布代码之前肯定要经过测试。你看第22行“message.show();”，递归调用了自身，所以setTimeout的效果跟setInterval是一样的。

8 楼 z2009zxiaolong 2012-09-05&

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS特效-浏览器标题栏闪耀

相关资料更多>

推荐阅读更多>