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);
效果：
缺點是沒有保存數據，之后會考慮用js+WebSql實現數據保存，但是目前只有chrome支持WebSql
關於js設置默認值，可以參考：http://www.ido321.com/555.html