JS原生编写实现留言板功能

实现这个留言板功能比较简单，所以先上效果图：

实现用户留言内容，留言具体时间。

<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>

通过获取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>

JS原生编写实现留言板功能相关推荐

利用Vue.js实现简单的留言板功能
此案例主要实现点击发送留言的按钮,将我们的留言以及留言人的信息展示在留言板上,下面就是具体的步骤: 一 .搭建整个留言板页面结构为了页面整体效果稍微好看一点,此案例运用bootstrap框架对页面表 ...
android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
留言板代码 php js,原生JS实现留言板功能
本文实例为大家分享了JS实现留言板功能的具体代码,供大家参考,具体内容如下实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. window.onload = functi ...
JS实现简易留言板功能
一.分析 1.留言板功能 ①发布评论 ②删除评论 2.发布功能 ①发布评论前判断评论框(用textarea输入评论)是否为空 ②点击发布按钮,发布评论(用li展示评论,开始评论为空,html部分< ...
html如实现留言板功能,JS实现留言板功能[楼层效果展示]
功能实现: 1.发布人和发布内容非空校验 2.编辑删除功能 3.楼层效果展示 4.发布时间展示效果图目录 tools.js 时间工具包 function getTime(){ var weeks ...
html如实现留言板功能,JS实现留言板功能
每天一个JS 小demo之留言板.主要知识点:DOM方法的理解和运用 Document .wrap { width: 400px; margin: 30px auto; } textarea { di ...
原生php开发留言板源码
原生php mysql 留言板源码(含后台管理员管理) php留言板是经典的PHP入门学习项目.本留言板代码,基于php和mysql实现,经过小黄鸡调试,可以无错运行.这个留言板适用于PHP课程设计适 ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
PHP 留言板功能需求分析
一.PHP 留言板功能需求分析: 功能需求:用户利用留言板可以发表自己的留言,管理员可以在后台对留言进行回复或删除管理. 主要功能分为:前台用户留言展示与后台留言管理两个部分. 二.前台用户留言 ...

JS原生编写实现留言板功能

JS原生编写实现留言板功能相关推荐

最新文章

热门文章