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



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

<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. Steam 游戏 《Crashlands（崩溃大陆）》修改器制作-[先使用CE写，之后有时间的话改用CheatMaker]（2020年寒假小目标12）

    日期:2020.02.15 博客期:155 星期六 [温馨提示]: 只是想要修改器的网友,可以直接点击此链接下载: 只是想拿CT文件的网友,可以直接点击此链接下载: 没有博客园账号的网友,可以将页面下 ...

  2. jQuery学习（三）

    jQuery文档操作方法 1.内部追加内容 选择器追加到内容 append(content)在当前jQuery对象内部所包含的DOM对象的内部的最后追加content对应的内容,其中content可以 ...

  3. UVA10723 电子人的基因

    UVA10723 电子人的基因 题目比较难找附上链接:https://vjudge.net/problem/UVA-10723 题目描述: 给你两个字符串,你需要找出一个最短的字符串,使得两个给定字符 ...

  4. 温湿度传感器AM2302(DH22)

    AM2302   3.3V - 5.5V,建议供电电压为 5V单总线通信模式时,SDA 上拉(开漏)后与微处理器的 I/O 端口相连.单总线通信特殊说明: 0.功耗待机40~50uA;测量1~1.5m ...

  5. 高级T-SQL进阶系列 （一）【下篇】：使用 CROSS JOIN 介绍高级T-SQL

    [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:传送门. 性能考虑产生了笛卡尔积的这个CROSS JOIN操作符具有一些性能方面的问题需要考虑.因为SQL引擎需要将一个数 ...

  6. 3种使用MQ实现分布式事务的方式

    1.保证消息传递与一致性 1.1生产者确保消息自主性 当生产者发送一条消息时,它必须完成他的所有业务操作. 如下图: 这保证消费者接受到消息时,生产者已处理完毕相关业务,也就是1PC的基础. 1.2 ...

  7. linux动态监控dstat&&glances&&psutil&&bottle

    安装dstat yum install dstat 安装glances yum install python-devel pip install glances 如果我们安装了 Bottle 这个 w ...

  8. django xadmin中logout页面在chrome浏览器中点击关闭页面无效

    问题现象 django xadmin中logout页面在chrome浏览器中点击关闭页面无效,无法关闭相应的页面 问题原因 高版本的chrome等浏览器不支持在window.colse()的写法 问题 ...

  9. Java 笔试题

    有一些还是存在问题,欢迎大家一起探讨. 在Java类中,使用以下( )声明语句来定义公有的int型常量MAX. A. public int MAX = 100; B. final int MAX = ...

  10. 如何安装部署和优化Tomcat？（Tomcat部署和优化与压测，虚拟主机配置，Tomcat处理请求的过程）

    文章目录 前言 一:Tomcat安装部署 1.1:Tomcat简介 1.2:Tomcat核心组件 1.3:Tomcat处理请求的过程 1.3.1:请求过程基本解释 1.3.2:请求过程详细解释 1.4 ...