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

最新推荐文章于 2023-12-12 14:40:14 发布

会飞的Pikachu

最新推荐文章于 2023-12-12 14:40:14 发布

阅读量4k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/u011043843/article/details/39259537

版权

93 篇文章 1 订阅

订阅专栏

需求：用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);

效果：

关注