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



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

<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. EasyUI中使用自定义的icon图标

    我们在web开发中为了界面的更加漂亮,我们可能会使用EasyUI框架来帮我们实现一些好看的效果,那么在框架里面提供了很多的样式和图标,但是有时候自带的图标已经满足不了我们啦,这时候我们应该往里面加入我 ...

  2. 【PAT甲级】1039 Course List for Student (25 分)（vector嵌套于map，段错误原因未知）

    题意: 输入两个正整数N和K(N<=40000,K<=2500),分别为学生和课程的数量.接下来输入K门课的信息,先输入每门课的ID再输入有多少学生选了这门课,接下来输入学生们的ID.最后 ...

  3. 设计模式六大原则——开放封闭原则（OCP）

    什么是开闭原则? 定义:是说软件实体(类.模块.函数等等)应该可以扩展,但是不可修改. 开闭原则主要体现在两个方面: 1.对扩展开放,意味着有新的需求或变化时,可以对现有代码进行扩展,以适应新的情况. ...

  4. 洛谷 T8088 RQY的舞会

    嗯... 题目链接:https://www.luogu.org/problem/T8088 这道题很好想,我想的是维护两个小根堆(当然可以用数组模拟) 然后从堆顶开始,如果两个元素的差小于1,则cnt ...

  5. Fedora26安装Mysql实记（包含yum换源教程）

    课程实验中有一项是安装Hive,这个过程中需要安装Mysql. 在安装Mysql耗费了好多时间,总是报错数据仓库同步失败什么的. 输入yum install mysql 就提示错误,连接不上数据源.该 ...

  6. java判断文件或文件夹是否在

    public static void main(String[] args) { File file = new File("G:\\Jeff.txt"); File dir = ...

  7. Python - 模块中的"if __name__ == '__main__':"

    1.1 如果导入的模块除了定义函数之外还中有可以执行代码,那么Python解释器在导入这个模块时就会执行这些代码. module1.py: def foo(): print('module 1') f ...

  8. UDP通讯代码

    UDP客户端代码: import socket # 创建套接字 socket.AF_INET:IPV4 socket.SOCK_DGRAM:UDP协议 udp_client=socket.socket ...

  9. Codeforces #617 (Div. 3)B. Food Buying

    Mishka wants to buy some food in the nearby shop. Initially, he has ss burles on his card. Mishka ca ...

  10. 洛谷P1198 [JSOI2008]最大数（线段树）

    题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:LLL不超过当前数列的长度.(L> ...