原生JS實現(xiàn)留言板功能
更新時間：2020年02月08日 07:48:29 作者：沉默的小猴子
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)留言板功能的具體代碼，供大家參考，具體內容如下
實現(xiàn)這個留言板功能比較簡單，所以先上效果圖：
實現(xiàn)用戶留言內容，留言具體時間。
<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){
//寫入發(fā)表留言的時間
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了通過實例理解javascript中沒有函數重載的概念,十分的簡單易懂，需要的朋友可以參考下2015-06-06
這篇文章主要幫助大家擁有一個屬于自己的javascript表單驗證插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
JS實現(xiàn)點擊下拉菜單把選擇的內容同步到input輸入框內的實例
下面小編就為大家分享一篇JS實現(xiàn)點擊下拉菜單把選擇的內容同步到input輸入框內的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JavaScript中定時器setTimeout()和setInterval()的用法
本文詳細講解了JavaScript中定時器setTimeout()和setInterval()的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
超越Jquery_01_isPlainObject分析與重構
isPlainObject是Jquery1.4后提供的新方法,用于判斷對象是否是純粹的對象（通過 {} 或者 new Object 創(chuàng)建的）。2010-10-10
本文通過實例給大家介紹Bootstrap的Refresh Icon相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-07-07
JavaScript中的垃圾回收機制負責自動管理內存，回收不再使用的對象所占用的內存空間。本文主要介紹了JS中垃圾回收機制的相關知識，需要的可以參考一下2023-04-04
在JavaScript中將日期字符串轉換為時間戳是一個常見需求,本文介紹了五種實現(xiàn)此轉換的方法,包括使用Date對象、正則表達式輔助解析、Date.parse()函數以及第三方庫如moment.js和date-fns,這些方法適用于不同格式的日期字符串,需要的朋友可以參考下2024-09-09
在前幾天做在線聽歌的過程中，碰到了根據歌名獲取播放地址和LRC文件內容的問題，今晚花了幾個小時把接口整理了一下2009-06-06
Jjcarousellite 實現(xiàn)圖片列表滾動的簡單實例
這篇文章主要介紹了Jjcarousellite 實現(xiàn)圖片列表滾動的簡單實例，有需要的朋友可以參考一下2013-11-11