用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);

 

效果:

14

缺点是没有保存数据,之后会考虑用js+WebSql实现数据保存,但是目前只有chrome支持WebSql

关于js设置默认值,可以参考:http://www.ido321.com/555.html

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值