原生JS實現(xiàn)留言板功能
更新時間：2020年02月08日 07:48:29 作者：沉默的小猴子
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)留言板功能的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)這個留言板功能比較簡單，所以先上效果圖：
實現(xiàn)用戶留言內(nèi)容，留言具體時間。
<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);
//寫入留言內(nèi)容
var oMessageContent = document.createElement("div");
oMessageContent.className = "message_content";
oMessageContent.innerHTML = oInput.value;
oInput.value = "";
oMessageBox.appendChild(oMessageContent);
}
}
}
</script>
通過獲取input的輸入焦點事件抓取內(nèi)容，傳遞給留言板的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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
js加載之使用DOM方法動態(tài)加載Javascript文件
傳統(tǒng)上，加載Javascript文件都是使用script標簽，我們也可以使用DOM方法，動態(tài)加載Javascript文件，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-11-11
基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動
這篇文章主要介紹了基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動,代碼簡單易懂非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細介紹了JavaScript Canvas實現(xiàn)驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了微信小程序之GET請求的實例詳解的相關資料,希望通過本文能幫助到大家，讓大家理解掌握該如何使用get請求,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了微信小程序全局變量的設置、使用、修改過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
利用js讀取動態(tài)網(wǎng)站從服務器端返回的數(shù)據(jù)
這篇文章主要介紹了利用js讀取動態(tài)網(wǎng)站從服務器端返回的數(shù)據(jù),需要的朋友可以參考下2014-02-02
呵呵，又弄成了三部曲，這是最后一部分，關于鼠標和瀏覽器本身顯示上的一些屬性。2010-06-06
這篇文章主要介紹了JS實現(xiàn)簡單易用的手機端浮動窗口顯示效果,涉及javascript針對頁面元素的動態(tài)操作相關技巧,適用于做廣告展示,需要的朋友可以參考下2016-09-09
本文通過兩種方法給大家介紹vue-cli+es6引入es5寫的js，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-04
在頁面中的鏈接除了常規(guī)的方式以外,如果使用javascript,還有很多種方式,下面這篇文章主要給大家介紹了關于JavaScript常見打開鏈接的幾種方法,需要的朋友可以參考下2024-01-01