码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-14 01:17:56      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   java   ar   

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

效果:

bubuko.com,布布扣

 

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

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

标签:des   style   blog   http   color   io   os   java   ar   

原文地址:http://www.cnblogs.com/ido321/p/3970561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!