原生JavaScript实现简易留言板

作者:函数茶馆时间:2026-10-24 03:36:53浏览:317

本文介绍如何使用原生JavaScript实现一个简易留言板。通过获取用户输入内容,利用DOM操作动态创建显示元素,并记录留言时间。代码展示了如何监听提交按钮点击事件,将输入框内容添加到页面指定区域,实现基本的留言展示功能。

原生JavaScript实现简易留言板

本文分享了一段使用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章