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

最新推荐文章于 2023-02-20 07:44:36 发布

a52071453

最新推荐文章于 2023-02-20 07:44:36 发布

阅读量483

点赞数

分类专栏： javascript 文章标签： JavaScript 浏览器 ViewUI

本文链接：https://blog.csdn.net/a52071453/article/details/84286857

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

JS特效标题栏闪烁html5定时器前端特效 .
使用JavaScript制作浏览器标题栏闪烁效果，以面向对象的方式方式封装了JS。当你遭遇了Backbone，就会习惯JS也面向对象，也会习惯JS也MVC分离。就像这种JS风格，我喜欢。扯远了，呵呵。

不废话了，直接贴代码。

<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: 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 οnlοad="bind();">
		点击页面取消消息闪烁提示
	</body>

</html></SPAN>

a52071453

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS特效-浏览器标题栏闪烁

JS特效标题栏闪烁html5定时器前端特效 . 使用JavaScript制作浏览器标题栏闪烁效果，以面向对象的方式方式封装了JS。当你遭遇了Backbone，就会习惯JS也面向对象，也会习惯JS也MVC分离。就像这种JS风格，我喜欢。扯远了，呵呵。不废话了，直接贴代码。 &lt;SPAN style="FONT-SIZE: medium"&gt;&lt;html&gt;&lt;hea...
复制链接

扫一扫