HTML section:
1: <! Doctype>
2:
3:
4: <title>js implement simple message board </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:
9: <body>
Ten: <div class= "Container" >
One: <div class= "Content" >
: <!--<form action= "?" method= "?" >
: <div class= "text" >
<label for= "message" >JS simple message board (empty can view the default message content) </label>
: </div>
: <div class= "text" style= "margin-left:-75px" >
Page: <label for= "name" > Nickname:</label>
: <input type= "text" id= "name" value= "nickname (Dwqs by default)" class= "TXT" >
: </div>
: <div class= "text" >
£ <textarea rows= "5" cols= "" id= "message" value= "" class= "txt" > Leave me a message (Default message content: My station: www.ido321.com) </ Textarea>
: </div>
At: <div class= "BTN" >
: <!--<input type= "Submit" id= "Submit" value= "Submission Message" >
: <button id= "BTN1" > Submit message </button>
: </div>
<!--</form> –
: </div>
£ º
:
To: <div class= "messagelist" id= "Messagelist" >
: </div>
: </div>
: </body>
:
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:}
Ten:. text{
One: text-align:center;
: margin-bottom:15px;
13:}
:. btn{
: margin-right:30px;
: float:right;
17:}
: #messageList {
: width:100%;
: height:100%;
21:}
:. txt{
at: Color:gray;
: opacity:0.8;
: Filter:alpha (opacity=0.8);
26:}
ls|
1:/**
2: * After the document is loaded, run a function called Func
3: * @param func The name of the function to run
4: * Description: The value of the Window.onload event handler function is stored in the variable oldonload; If no function is bound on the function, the normal add
5: * PLUS; If a function is already bound, it is added to the end of the instruction.
6: */
7:function Addloadevent (func)
8: {
9: var oldonload = window.onload;//function to get the previous onload event
: if (typeof window.onload! = ' function ')
One: {
: window.onload = func;
: }
: Else
: {
: window.onload = function ()
: {
: oldonload ();//function that calls the OnLoad event that was overwritten before
: func ();//Call the current event function
: }
: }
22:}
23:function GetMessage () {
: var btn = document.getElementById ("btn1");
: var message = document.getElementById ("message");
$: var name = document.getElementById ("name");
: var namevalue = "";
£ º var messagevalue = "";
29:
: Name.onfocus = function () {
To: name.value= "";
: }
: Message.onfocus = function () {
Message.value=: " ";
: }
36:
PNS: Btn.onclick = function () {
A: messagevalue = Message.value | | "My station: www.ido321.com"; Set default values
The following: namevalue = Name.value | | "Dwqs";
Max: var msglist = document.getElementById ("Messagelist");
Msgdiv: var = document.createelement ("div");
£ º var msgtxt = document.createTextNode (namevalue+ "said:" +messagevalue);
: msgdiv.appendchild (MsgTxt);
: msglist.appendchild (MSGDIV);
: }
46:}
47:addloadevent (GetMessage);
Effect:
The disadvantage is that the data is not saved, and then the data is saved with Js+websql, but only Chrome is currently supported Websql
For the default value of JS setting, refer to: http://www.ido321.com/555.html
Use JS to make a simple message board effect