Question: How to implement a js message board

Question: How to implement a js message board

Requirement: Use js to make a simple message board

Html section:

   1: 

   2: 

   3: 

4:Simple Message Board implemented by js

   5:     
 

   6:     
 

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

   8: 

   9: 

  10:     

  11:         

  12:             
 

  28:         

29: Message list

  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: * after the document is loaded, run the function named func.

3: * @ param func name of the function to be run

4: * Note: the value of the window. onload event handler function is stored in the variable oldonload. If the function is not bound to any function, it is added normally.

5: * Add; if a function is bound, add it to the end of the command.

   6: */

   7: function addLoadEvent(func)

   8: {

9: var oldonload = window. onload; // obtain the function of the previous onload event

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

  11:     {

  12:         window.onload = func;

  13:     }

  14:     else

  15:     {

  16:         window.onload = function()

  17:         {

18: oldonload (); // call the previously overwritten onload event Function

19: func (); // call the current event Function

  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 | "My Website: www.ido321.com"; // set the default value

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

Effect:

Source: http://www.ido321.com/591.html