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



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

<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原生编写实现留言板功能的更多相关文章

  1. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  2. 使用PHP连接数据库实现留言板功能

    PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html>    <head>        <meta charset=&qu ...

  3. jsp中运用application实现共享留言板功能

    jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...

  4. Web开发从零单排之二:在自制电子请帖中添加留言板功能,SAE+PHP+MySql

    在上一篇博客中介绍怎样在SAE平台搭建一个html5的电子请帖网站,收到很多反馈,也有很多人送上婚礼的祝福,十分感谢! web开发从零学起,记录自己学习过程,各种前端大神们可以绕道不要围观啦 大婚将至 ...

  5. 利用反馈字段给帝国cms添加留言板功能(图文教程)

    帝国cms的插件中提供信息反馈字段,很多人却不会用.这里谢寒教大家如何来给自己的帝国cms网站添加留言板功能 1.找到添加地址 2.添加字段 3.你可以在字段中添加多种字段类型(有文本域,单行文本框, ...

  6. php实现留言板功能

    这个小小的留言板功能适合班级内或者公司内部之间的讨论,对话和留言,非常的方便,更重要的是无需网络,对于公司管理层来说是非常乐于常见的, 下面是这个留言板的写法: 1 首先是登录页面: <form ...

  7. Vue之简易的留言板功能

    今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...

  8. 用php(session)实现留言板功能----2017-05-09

    要实现留言功能,发送者和接受者必不可少,其次就是留言时间留言内容. 要实现的功能: 1.登录者只能查看自己和所有人的信息,并能够给好友留言 2.留言板页面,好友采取下拉列表,当留言信息为空时,显示提示 ...

  9. Django web框架开发基础-django实现留言板功能

    1.创建项目 cmd  django-admin startpoject cloudms 2.创建APP cmd django-admin startapp msgapp 3.修改settings,T ...

随机推荐

  1. 爬虫,工具 - Splash

    What is it? Splash is a javascript rendering service. It's a lightweight web browser with an HTTP AP ...

  2. 4_3 救济金发放(UVa133)<子过程/函数设计>

    为了缩短领救济品的队伍,NNGLRP决定了以下策略:每天所有来申请救济品的人会被放在一个大圆圈,面朝里面.标明一个人为编号1号,其他的就从那个人开始逆时针开始编号直到N.一个官员一开始逆时针数,数k个 ...

  3. Wireshark 查看指定进程的网络包

    Wireshark 查看指定进程的网络包 打开任务管理器,右键筛选列,选中PID(进程标识符): 找到该进程对应的PID,如1200: 在cmd中执行netstat -ano|findstr 1200 ...

  4. Python爬虫:urllib库的基本使用

    请求网址获取网页代码 import urllib.request url = "http://www.baidu.com" response = urllib.request.ur ...

  5. WLC RTU license

    目前思科的某些WLC不是一定要license文件去安装,例如这里提到的RTU license. RTU:Right To Use Right to Use (RTU) licensing is a m ...

  6. 重新梳理IT知识之java-01语法(一)

    标识符的命名规范 包名:xxxyyyzzz 类名.接口名:XxxYyyZzz (大驼峰) 变量名.方法名:xxxYyyZzz 常量名:XXX_YYY_ZZZ //**************强制类型转 ...

  7. Linux OS 集群 免密登录

    1. ssh-keygen  生成密钥 2. ssh-copy-id  集群主机名 参考: [图文详解]linux下配置远程免密登录

  8. android studio 导入主题设置,代码风格(附带eclipse 主题代码样式)

    在这里我最想说的,android studio默认主题样式,太low.不适合长时间写代码,看代码颜色不好识别,相对于背景的代码样式,我都不想吐槽了.还是网上下载主题代码样式导入样式.在这里我推荐 Su ...

  9. python闯关之路一(语法基础)

      1,什么是编程?为什么要编程? 答:编程是个动词,编程就等于写代码,那么写代码是为了什么呢?也就是为什么要编程呢,肯定是为了让计算机帮我们搞事情,代码就是计算机能理解的语言. 2,编程语言进化史是 ...

  10. maven热部署

    1.启动tomcat 2.修改 tomat/conf/tomcat-users.xml   配置用户名.密码.角色       manager-gui:图形界面的权限(调试时配置)       man ...