實現這個留言板功能比較簡單，所以先上效果圖：
實現用戶留言內容，留言具體時間。
<script>
window.onload = function(){
var oMessageBox = document.getElementById("messageBox");
var oInput = document.getElementById("myInput");
var oPostBtn = document.getElementById("doPost");
oPostBtn.onclick = function(){
if(oInput.value){
//寫入發表留言的時間
var oTime = document.createElement("div");
oTime.className = "time";
var myDate = new Date();
oTime.innerHTML = myDate.toLocaleString();
oMessageBox.appendChild(oTime);
//寫入留言內容
var oMessageContent = document.createElement("div");
oMessageContent.className = "message_content";
oMessageContent.innerHTML = oInput.value;
oInput.value = "";
oMessageBox.appendChild(oMessageContent);
}
}
}
</script>
通過獲取input的輸入焦點事件抓取內容，傳遞給留言板的div來展示。
<body>
<div class="content">
<div class="title">用戶留言</div>
<div class="message_box" id="messageBox"></div>
<div><input id="myInput" type="text" placeholder="請輸入留言類容"><button id="doPost">提交</button></div>
</div>
</body>