您的位置：首页 > Web前端 > JavaScript

问题：关于一个贴友的js留言板的实现

2014-09-14 00:23 585 查看

需求：用js做一个简单的留言板效果

html部分：

1: <!DOCTYPE>

2: <html lang="zh-en">

3: <head>

4:     <title>js实现简单留言板</title>

5:     <meta http-equiv="content-type" content="text/html;charset=utf-8">

6:     <link rel="stylesheet" type="text/css" href="./forum.css">

7:     <script type="text/javascript" src="./forum.js"></script>

8: </head>

9: <body>

10:     <div class="container">

11:         <div class="content">

12:             <!-- <form action="?" method="?"> -->

13:                 <div class="text">

14:                     <label for="message">js简单留言板(置空可以查看默认的留言内容)</label>

15:                 </div>

16:                 <div class="text" style="margin-left:-75px">

17:                     <label for="name">昵称：</label>

18:                     <input type="text" id="name" value="昵称(默认是dwqs)" class="txt">

19:                 </div>

20:                 <div class="text">

21:                     <textarea rows="5" cols="30" id="message" value="" class="txt">给我留言(默认留言内容：我的小站：www.ido321.com)</textarea>

22:                 </div>

23:                 <div class="btn">

24:                     <!-- <input type="submit" id="submit" value="提交留言"> -->

25:                     <button id="btn1">提交留言</button>

26:                 </div>

27:             <!-- </form> -->

28:         </div>

29:         <h3 style="clear:right">留言列表</h3>

30:         <hr/>

31:         <div class="messageList" id="messageList">

32:         </div>

33:     </div>

34: </body>

35: </html>

css:

1: *{

2:     margin: 0 auto;

3:     padding: 0;

4:     font-family: "Microsoft YaHei","sans-serif";

5: }

6: .container{

7:     width: 400px;

8:     height: auto;

9: }

10: .text{

11:     text-align: center;

12:     margin-bottom: 15px;

13: }

14: .btn{

15:     margin-right: 30px;

16:     float: right;

17: }

18: #messageList{

19:     width: 100%;

20:     height: 100%;

21: }

22: .txt{

23:     color: gray;

24:     opacity: 0.8;

25:     filter:alpha(opacity=0.8);

26: }

js:

1: /**

2: *文档加载完后，运行名为func的函数

3: *@param func 需要运行的函数的名

4: *说明：window.onload事件处理函数的值存入变量oldonload;如果函数上没有绑定任何函数，则正常添

5: *加；若已经绑定有函数，则添加到指令末尾。

6: */

7: function addLoadEvent(func)

8: {

9:     var oldonload = window.onload; //得到上一个onload事件的函数

10:     if(typeof window.onload != 'function')

11:     {

12:         window.onload = func;

13:     }

14:     else

15:     {

16:         window.onload = function()

17:         {

18:             oldonload(); //调用之前覆盖的onload事件的函数

19:             func(); //调用当前事件函数

20:         }

21:     }

22: }

23: function getMessage(){

24:     var btn = document.getElementById("btn1");

25:     var message = document.getElementById("message");

26:     var name = document.getElementById("name");

27:     var nameValue = "";

28:     var messageValue = "";

29:

30:     name.onfocus = function(){

31:         name.value="";

32:     }

33:     message.onfocus = function(){

34:         message.value="";

35:     }

36:

37:     btn.onclick = function(){

38:         messageValue =  message.value || "我的小站：www.ido321.com" ; //设置默认值

39:         nameValue = name.value || "dwqs";

40:         var msgList = document.getElementById("messageList");

41:         var msgDiv = document.createElement("div");

42:         var msgTxt = document.createTextNode(nameValue+"说："+messageValue);

43:         msgDiv.appendChild(msgTxt);

44:         msgList.appendChild(msgDiv);

45:     }

46: }

47: addLoadEvent(getMessage);

效果：

来源：http://www.ido321.com/591.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航