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

html部分:

   1: 

 

   2: 

 

   3: 

 

   4:     js实现简单留言板

 

   5:     

 

   6:     

 

   7:     

 

   8: 

 

   9: 

 

  10:     

 

  11:         

 

  12:             

 

  13:                 

 

  14:                     

 

  15:                 

 

  16:                 

 

  17:                     

 

  18:                     

 

  19:                 

 

  20:                 

 

  21:                     

 

  22:                 

 

  23:                 

 

  24:                     

 

  25:                     

 

  26:                 

 

  27:             

 

  28:         

 

  29:         

留言列表

 

  30:         

 

  31:         

 

  32:         

 

  33:     

 

  34: 

 

  35: 

 

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

 

效果:

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

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

你可能感兴趣的:(用js做一个简单的留言板效果)