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

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>
posted on 2009-07-29 09:35  钱途无梁  阅读(525)  评论(1)    收藏  举报