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