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



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

  1. <script>
  3. 	window.onload = function(){
  5. 		var oMessageBox = document.getElementById("messageBox");
  6. 		var oInput = document.getElementById("myInput");
  7. 		var oPostBtn = document.getElementById("doPost");
  9. 		oPostBtn.onclick = function(){
  10. 			if(oInput.value){
  11. 				//写入发表留言的时间
  12. 				var oTime = document.createElement("div");
  13. 				oTime.className = "time";
  14. 				var myDate = new  Date();
  15. 				oTime.innerHTML = myDate.toLocaleString();
  16. 				oMessageBox.appendChild(oTime);
  18. 				//写入留言内容
  19. 				var oMessageContent = document.createElement("div");
  20. 				oMessageContent.className = "message_content";
  21. 				oMessageContent.innerHTML = oInput.value;
  22. 				oInput.value = "";
  23. 				oMessageBox.appendChild(oMessageContent);
  24. 			}
  26. 		}
  28. 	}
  30. </script>

通过获取input的输入焦点事件抓取内容，传递给留言板的div来展示。

  1. <body>
  2. 	<div class="content">
  3.         <div class="title">用户留言</div>
  4.         <div class="message_box" id="messageBox"></div>
  5.         <div><input id="myInput" type="text" placeholder="请输入留言类容"><button id="doPost">提交</button></div>
  6.     </div>
  7. </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. IDEA导入maven项目不自动识别

    解决办法: 选中module的pom.xml,右键,选择" add as maven project",即可刷新为maven项目

  2. properties配置文件在idea中默认utf-8可能会乱码

    改一个设置就好了

  3. mysql数据库数据备份还原

    1.直接在命令行里面执行 备份一个数据库:mysqldump -h server -u username -p password db_name > database-sqlbkp_`date ...

  4. ES5-Object扩展方法

    1.Object新增一个方法,Object.create();,用来以一个对象为基础创建另一个对象,新建的对象的__proto__指向基础对象  var obj = {name:'maycpou',a ...

  5. springboot 打包成jar

    1.pom.xml配置 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins< ...

  6. 洛谷 P5019 铺设道路（差分）

    嗯... 题目链接:https://www.luogu.org/problem/P5019 首先简化一下题意: 给定一个长为N的数组,每次操作可以选择一个区间减去1,问最少多少次操作可以将数组中的数全 ...

  7. Go文档：go命令

    目录 go go bug--启动bug报告 go build--编译包及其依赖包 go clean--删除对象文件和缓存文件 go doc--查看包或符号的文档 go env--打印环境变量 go f ...

  8. python多线程下载ts文件

    # -*- coding: utf-8 -*- """ Created on Wed Aug 22 15:56:19 2018 @author: Administrato ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：可滚动

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...

  10. B: 最小代价

    B: 最小代价 题解:先用最小生成树求联通所有点的最小代价ans 在求度为1的时候权值最大的点mx ans-mx就是答案 #include<iostream> #include<al ...