模拟"开心网"消息提示的小例子

JS代码如下:

 1 // 消息
 2          function  HeadMessage(alertMsg,hiddenAlertMsg)
 3          {
 4            this.alertFlag = false;
 5            this.intervalId = "";
 6            this.alertMsg = alertMsg;
 7            this.hiddenAlertMsg = hiddenAlertMsg;
 8        }
 9         
10          // 初始化定时器
11         HeadMessage.prototype.initAlert  =   function (functionName)
12          {
13            this.intervalId = setInterval("messageAlert()",1000);
14        }
15          // 清除定时器
16         HeadMessage.prototype.clearAlert  =   function (title)
17          {
18            if(this.intervalId != "")
19            {
20                clearInterval(this.intervalId);
21                this.intervalId = "";
22                document.title = title;
23            }
24        }
25          // Prototype Ajax 获取返回值
26         HeadMessage.prototype.oversee  =   function (requestUrl)
27          {
28            new Ajax.Request
29            (
30                requestUrl,
31                {
32                    method:"post",
33                    onComplete:function(request)
34                    {
35                        if(parseInt(request.responseText) > 0 && this.intervalId == "")
36                        {
37                            this.initAlert();
38                        }
39                        else if(parseInt(request.responseText) <= 0)
40                        {
41                            this.clearAlert("测试消息提示警告");
42                        }
43                    }
44                }
45            )
46        }
47          // 测试方法
48         HeadMessage.prototype.overlook  =   function (id)
49          {
50            var textVal = document.getElementById(id).value;
51            if(parseInt(textVal) > 0 && this.intervalId == "")
52            {
53                this.initAlert();
54            }
55            else if(parseInt(textVal) <= 0)
56            {
57                this.clearAlert("测试消息提示警告");
58            }
59        }
60          // 闪烁判断
61          function  messageAlert()
62          {
63            if(msg.alertFlag)
64            {
65                msg.alertFlag = false;
66                document.title = msg.alertMsg;
67            }
68            else
69            {
70                if(msg.intervalId  != "")
71                {
72                    document.title = msg.hiddenAlertMsg;
73                    msg.alertFlag = true;
74                }
75            }
76        }

 

HTML模拟测试代码如下:

 

 1 < html >
 2      < head >
 3          < title > 测试消息提示警告 </ title >
 4          < script  type ="text/javascript"  src ="/js/prototype.js" ></ script >
 5          < script  type ="text/javascript"  src ="/js/headmessage.js" ></ script >
 6          < script  type ="text/javascript" >
 7        var msg = new HeadMessage("【新消息】","【　　　】");
 8        function overseeState()
 9        {
10            var intervalId = setInterval("msg.overlook('tId')",1000);
11        }
12        overseeState();
13     </ script >
14      </ head >
15     
16      < body >
17          < input  type ="text"  id  = "tId"  name  = "tId" />
18      </ body >
19 </ html >