原生JS实现留言板功能


Posted in Javascript onFebruary 08, 2020

本文实例为大家分享了JS实现留言板功能的具体代码,供大家参考,具体内容如下

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

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

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

Javascript 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
javascript实现留言板功能
Feb 08 #Javascript
JavaScript实现PC端横向轮播图
Feb 07 #Javascript
vue更改数组中的值实例代码详解
Feb 07 #Javascript
Vue 一键清空表单的实现方法
Feb 07 #Javascript
Vue中qs插件的使用详解
Feb 07 #Javascript
npm qs模块使用详解
Feb 07 #Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 #Javascript
You might like
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
python如何修改文件时间属性
2021/02/05 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
谢师宴答谢词
2015/01/05 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
观看建国大业观后感
2015/06/01 职场文书
周末问候语大全
2015/11/10 职场文书
68句权威创业名言
2019/08/26 职场文书