原生JS實現留言板功能
阿新 • • 發佈：2020-02-10
本文例項為大家分享了JS實現留言板功能的具體程式碼，供大家參考，具體內容如下
實現這個留言板功能比較簡單，所以先上效果圖：
實現使用者留言內容，留言具體時間。
<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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。