模拟开心网新消息

最新推荐文章于 2025-05-24 21:20:00 发布

最新推荐文章于 2025-05-24 21:20:00 发布 · 120 阅读

文章标签：

#JavaScript #prototype #HTML #ViewUI

javascript 专栏收录该内容

15 篇文章

订阅专栏

最近在做公司的项目的用到了类似开心网上新消息的功能，本人写了一个js的函数实现此功能，供大家交流:-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>测试页面</TITLE>
  <script type="text/javascript">
	var dynamicMsg = null;
	function init() {
		dynamicMsg = new DynamicMessage(window.document.title, "【ＨＩ，消息】", "【　　　　　】");
	}

	function begin() {
		dynamicMsg.initIntervalMsg();
	}

	function end() {
		dynamicMsg.clearIntervalMsg();
	}

	/**
	  * 处理新消息提示的操作
	  */
	  function DynamicMessage(defaultMsg, msg, hiddenMsg) {
		this.initIntervalMsg = function() {
			this.intervalMsg = setInterval(function() {
					if(!this.bMsg) {
						window.document.title = msg + " - " + defaultMsg;
						this.bMsg = true;
					} else {
						window.document.title = hiddenMsg + " - " + defaultMsg;
						this.bMsg = false;
					}  		
				}, 
				1000
			  );
		  };
		  
		  this.clearIntervalMsg = function() {
			if(this.intervalMsg != null) {
				clearInterval(this.intervalMsg);
				window.document.title = defaultMsg;
				this.bMsg = false;
			}
		  };
	  }
  </script>
 </HEAD>
 <BODY onload="init();">
	<center>
		<input type="button" value="begin" onclick="begin();"/>
		<input type="button" value="end" onclick="end();"/>
		<br/>
		coloryeah - 为意识增添色彩!
	</center>
 </BODY>
</HTML>

由于这个对象没有初始化太多次和涉及闭包的操作，故没有采用prototype原型。

好啦，一个简单实用的 hi,消息完成了。