原生JavaScript实现简易留言板
作者:函数茶馆时间:2026-10-24 03:36:53浏览:317
本文介绍如何使用原生JavaScript实现一个简易留言板。通过获取用户输入内容,利用DOM操作动态创建显示元素,并记录留言时间。代码展示了如何监听提交按钮点击事件,将输入框内容添加到页面指定区域,实现基本的留言展示功能。
原生JavaScript实现简易留言板
本文分享了一段使用JavaScript实现的留言板功能代码,供读者参考。
该留言板功能的实现逻辑较为直观,首先展示最终效果如下图所示:

核心功能包括记录用户输入的留言内容,并自动附加留言生成的具体时间。
<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>
具体实现上,通过监听输入框的提交事件获取用户输入,随后利用JavaScript动态生成DOM元素,将内容和时间注入到留言板的显示区域中。
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
作者最新文章
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
