js實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果實(shí)例分析

2024-05-06 16:10:48

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果的方法,以實(shí)例形式分析了網(wǎng)上比較常見的實(shí)現(xiàn)方法,并對于原理進(jìn)行分析并加以改進(jìn),最后給出了一個具體的應(yīng)用實(shí)例供大家參考,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示效果的方法。分享給大家供大家參考。具體分析如下：

網(wǎng)頁標(biāo)題欄閃爍效果我們在一些聊天工具會常看到，像現(xiàn)在流量的聊天室，下面我們就來給大家總結(jié)一款實(shí)現(xiàn)網(wǎng)頁標(biāo)題欄閃爍提示代碼，感興趣可參考一下。

公司的項目中用到了這個新消息提示的效果，主要用于提示用戶有新消息。具體實(shí)現(xiàn)代碼如下：

復(fù)制代碼代碼如下:

		var newMessageRemind={
		_step: 0,
		_title: document.title,
		_timer: null,
		//顯示新消息提示
		show:function(){
		var temps = newMessageRemind._title.replace("【　　　】", "").replace("【新消息】", "");
		newMessageRemind._timer = setTimeout(function() {
		newMessageRemind.show();
		//這里寫Cookie操作
		newMessageRemind._step++;
		if (newMessageRemind._step == 3) { newMessageRemind._step = 1 };
		if (newMessageRemind._step == 1) { document.title = "【　　　】" + temps };
		if (newMessageRemind._step == 2) { document.title = "【新消息】" + temps };
		}, 800);
		return [newMessageRemind._timer, newMessageRemind._title];
		},
		//取消新消息提示
		clear: function(){
		clearTimeout(newMessageRemind._timer );
		document.title = newMessageRemind._title;
		//這里寫Cookie操作
		}
		};

調(diào)用顯示新消息提示：newMessageRemind.show();
調(diào)用取消新消息提示：newMessageRemind.clear();
看了上面代碼自己再進(jìn)行優(yōu)化一下,不管怎樣，自己能吸收學(xué)習(xí)到就好了。：）我主要是覺得他代碼里面 newMessageRemind 這字段用得太多了，看起來密密麻麻的，多不舒服啊，想著換一種小清新的方式展現(xiàn)出來，于是乎就有了下面的代碼：

復(fù)制代碼代碼如下:

		var newMessageRemind = function () { 
		    var i = 0, 
		        style="border-left-color: rgb(0, 153, 204); border-left-width: 1px; border-left-style: solid; padding: 0px 3px; margin: 3px auto 0px; width: 640px; background-color: rgb(242, 246, 251); clear: both; border-top-color: rgb(0, 153, 204); border-top-width: 1px; border-top-style: solid; border-right-color: rgb(0, 153, 204); border-right-width: 1px; border-right-style: solid;">		復(fù)制代碼代碼如下:

		<!DOCTYPE HTML>
		<html lang="en-US">
		<head>
		<meta charset="UTF-8">
		<title>放假啦！！！</title>
		</head>
		<body>
		<button id="test">stop</button>
		<script type="text/javascript">
		var newMessageRemind = function () {
		 var i = 0,
		  title = document.title,
		  loop;
		 return {
		  show: function () {
		   loop = setInterval(function () {
		    i++;
		    if ( i == 1 ) document.title = '【新消息】' + title;
		    if ( i == 2 ) document.title = '【　　　】' + title;
		    if ( i == 3 ) i = 0;
		   }, 800);
		  },
		  stop: function () {
		   clearInterval(loop);
		   document.title = title;
		  }
		 };
		} ();
		newMessageRemind.show();
		document.getElementById('test').onclick = function () {
		 newMessageRemind.stop();
		};
		</script>
		</body>
		</html>