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>
JS原生编写实现留言板功能的更多相关文章
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- 使用PHP连接数据库实现留言板功能
PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html> <head> <meta charset=&qu ...
- jsp中运用application实现共享留言板功能
jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...
- Web开发从零单排之二:在自制电子请帖中添加留言板功能,SAE+PHP+MySql
在上一篇博客中介绍怎样在SAE平台搭建一个html5的电子请帖网站,收到很多反馈,也有很多人送上婚礼的祝福,十分感谢! web开发从零学起,记录自己学习过程,各种前端大神们可以绕道不要围观啦 大婚将至 ...
- 利用反馈字段给帝国cms添加留言板功能(图文教程)
帝国cms的插件中提供信息反馈字段,很多人却不会用.这里谢寒教大家如何来给自己的帝国cms网站添加留言板功能 1.找到添加地址 2.添加字段 3.你可以在字段中添加多种字段类型(有文本域,单行文本框, ...
- php实现留言板功能
这个小小的留言板功能适合班级内或者公司内部之间的讨论,对话和留言,非常的方便,更重要的是无需网络,对于公司管理层来说是非常乐于常见的, 下面是这个留言板的写法: 1 首先是登录页面: <form ...
- Vue之简易的留言板功能
今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...
- 用php(session)实现留言板功能----2017-05-09
要实现留言功能,发送者和接受者必不可少,其次就是留言时间留言内容. 要实现的功能: 1.登录者只能查看自己和所有人的信息,并能够给好友留言 2.留言板页面,好友采取下拉列表,当留言信息为空时,显示提示 ...
- Django web框架开发基础-django实现留言板功能
1.创建项目 cmd django-admin startpoject cloudms 2.创建APP cmd django-admin startapp msgapp 3.修改settings,T ...
随机推荐
- Spring Security教程之session管理
1.1 检测session超时 1.2 concurrency-control 1.3 session 固定攻击保护 Spring Security通过http元素下的子元素s ...
- PTA的Python练习题(十二)-第4章-6 输出前 n 个Fibonacci数
接下来应该做到 第4章-6 输出前 n 个Fibonacci数 了 def fib(n): a,b = 0,1 for i in range(n+1): a,b = b,a+b return a n= ...
- pwn之exp问题反馈和ASLR认知
如上问题是我执行脚本遇到的,改了脚本几次,依然没变,嗯...... 当我用了百度,据说是ALSR没关,的确,这导致我脚本中的addr是一个随机数,从而攻击失败 ##0x00:引用一下查到的知识:在传统 ...
- STC8
一 时钟: IRC:24MHZ;LSI:32.768KHZ;HSE:4~33MHZ,外设可分频 二 2种低功耗模式: IDLE:1.3MA@6MHZ,外设可唤醒. STOP: 三:ISP下载更新模式: ...
- Centos7618安装后常见操作
1.查看ip ip address 或者ip add 2.查看发行版本 yum -y install redhat-lsb lsb_release -a 3.查看内核版本 uname -r cat ...
- Asteroids!_poj2225
这是一个立方体的空间的路径搜索问题,若可达输出步数,不可达输出“NO ROUTE” 一道……课后题 输入的话我是按字符输入这个空间的 然后普通的bfs,一个方向数组,一个空间数组(因为只用一次,懒的再 ...
- centos上正式环境邮件发送失败问题
用celery异步发送邮件的时候遇到一个问题: 能接收到任务,但是就是执行不了, 也不报错 发现可能是settIngs.py里设置的端口有问题, 现在设置的端口是25, 改成465, 并且把ssl打开 ...
- java是什么
Java是一个纯的面向对象的程序设计语言 java是一种强类型语言,特点是: 1,跨平台 2,面向对象 3,简单易用 跨平台指的是只要有java虚拟机的平台,都可以运行java代码. Java继承了C ...
- ElementUI 日期选择器 datepicker 选择范围限制
在使用elementUI中日期选择器时,经常会遇到这样的需求——对可选择的时间范围有一定限制,比如我遇到的就是:只能选择今天以前的一年以内的日期. 查阅官方文档,我们发现它介绍的并不详细,下面我们就来 ...
- Servlet 学习(九)
Listener 1.功能 Servlet 2.3 中新增加的另一个功能 作用是监听Java Web 程序中的事件 对应设计模式中的Listener 模式,当事件发生的时候会自动触发该事件对应的Lis ...