用Javascript作消息提示框（类似于QQ用户上线的消息提示）

最新推荐文章于 2008-02-29 10:54:07 发布

转载最新推荐文章于 2008-02-29 10:54:07 发布 · 1.2k 阅读

文章标签：

#javascript #qq #button #generator #html #border

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章

订阅专栏

本文提供了一个使用纯 JavaScript 和 HTML 实现的消息弹窗示例。该示例展示了如何创建一个可自定义大小的弹窗，并通过 JavaScript 控制其显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 <html>
2  <head>
3   <title>HTMLPage1</title>
4   <meta name="vs_defaultClientScript" content="javascript">
5   <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5";>
6   <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
7   <meta name="ProgId" content="VisualStudio.HTML">
8   <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
9  </head>
10
11  <script language =javascript>
12    var titlePopup
13    var len;
14
15    function InitMsgBox()
16    { len = 0;
17     titlePopup=window.createPopup();
18     var titlePopupBody = titlePopup.document.body;
19     titlePopupBody.style.border ="solid black 1px";
20     var titleContent = "";
21     titleContent = titleContent + "<table cellPadding='5' bgcolor='#65c1ff' width='100%' height='100%' border=0 cellspacing=0 cellpadding=0>";
22     titleContent = titleContent + "<tr><td align=center><font size = 2>消息提醒</font></td></tr>";
23     titleContent = titleContent + "<tr><td><font size = 2>内容</td></font></tr>";
24     titleContent = titleContent + "<tr><td><font size = 2>内容</td></font></tr>";
25     titleContent = titleContent + "<tr><td><font size = 2>日期</td></font></tr>";
26     titleContent = titleContent + "</table>";
27     titlePopupBody.innerHTML = titleContent;
28
29     ShowMsgBox();
30    }
31
32    function MsgBox()
33    {
34     len += 4;
35     if (len > 110)
36     {
37      window.clearInterval(tID);
38     }
39     else
40     {//170固定了消息提示框的宽度
41      titlePopup.show(document.body.clientWidth - 170, document.body.clientHeight - len, 170, len, top.document.body);
42     }
43    }
44
45    var tID
46    function ShowMsgBox()
47    {
48     tID = window.setInterval("MsgBox()",15);
49    }
50  </script>
51
52  <body MS_POSITIONING="GridLayout">
53   <INPUT onclick="InitMsgBox()" id="Button1" style="Z-INDEX: 101; LEFT: 296px; POSITION: absolute; TOP: 344px" type="button"
54    value="Button" name="Button1">
55  </body>
56 </html>
57
58