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

z2009zxiaolong

浏览: 77177 次
性别:
来自: 湖南

最近访客更多访客>>

my22

u013070165

navaa

ocean2017

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端

JS特效标题栏闪烁 html5 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>

2
顶

2
踩

分享到：

Rails日志分析-将日志导出为csv | Html5新特性-Notifications入门

2012-09-04 18:36
浏览 6620
评论(11)
分类:编程语言
查看更多

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,这是对浏览器资源的一种浪费，希望不要误导新人。

10 楼 z2009zxiaolong 2012-09-05

bolo 写道

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

9 楼 z2009zxiaolong 2012-09-05

fffddd 写道

<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];”容易看懂。

8 楼 z2009zxiaolong 2012-09-05

sky_lichao 写道

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

一种比较简单的实现方式是，给message再定义一个属性，比如布尔型的flag。在show方法里的第24行if语句之前判断flag == true?，然后再写一个方法，需要开始时调用这个方法，将flag设置为true即可。

7 楼 z2009zxiaolong 2012-09-05

mfkvfn 写道

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

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

6 楼 mfkvfn 2012-09-05

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

5 楼 sky_lichao 2012-09-05

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

4 楼 bolo 2012-09-05

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

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>

我帮你修改了一下。

2 楼 z2009zxiaolong 2012-09-04

zjhlht 写道

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

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

1 楼 zjhlht 2012-09-04

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论