一篇文章告诉你如何用事件委托实现JavaScript留言板功能
用事件委托实现留言板功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
background: rgb(65, 65, 63);
}
.bacground {
width: 700px;
height: 100%;
background: white;
margin: auto;
margin-top: 20px;
}
.head,
.pop-head {
height: 50px;
font-size: 20px;
text-align: center;
line-height: 50px;
}
.name {
width: 640px;
height: 40px;
font-size: 20px;
margin: 10px 28px;
line-height: 50px;
border-radius: 8px;
border: 2px solid rgb(139, 137, 137);
outline: none;
}
.content,
.pop-reply {
width: 640px;
height: 150px;
font-size: 22px;
margin: 10px 28px;
border: 2px solid rgb(139, 137, 137);
outline: none;
border-radius: 8px;
resize: none;
}
.btn,
.pop-btn {
float: right;
height: 30px;
margin-right: 28px;
border-radius: 6px;
outline: none;
font-size: 20px;
padding: 0 20px;
background: rgb(169, 238, 255);
}
h3 {
font-size: 20px;
color: rgb(102, 102, 102);
background: rgb(205, 221, 248);
margin-top: 50px;
line-height: 50px;
text-indent: 30px;
font-weight: 545;
}
li {
list-style: none;
width: 640px;
font-size: 22px;
margin: 15px 30px;
}
.message-head {
display: flex;
}
.message-head .photo {
width: 70px;
height: 70px;
background: rgb(6, 109, 134);
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 70px;
overflow: hidden;
}
.message-head .time {
margin-left: 12px;
}
.liuyan,
.reply p {
width: 560px;
/* height: 76px; */
line-height: 50px;
display: block;
background: rgb(205, 221, 248);
font-size: 20px;
margin-left: 80px;
border-radius: 8px;
text-indent: 15px;
}
.delete {
width: 60px;
height: 30px;
display: block;
line-height: 30px;
margin-left: 580px;
/* margin-bottom: 0px; */
border-radius: 6px;
outline: none;
font-size: 15px;
background: rgb(169, 238, 255);
}
.answer {
width: 60px;
height: 30px;
display: block;
line-height: 30px;
margin-top: -29px;
margin-left: 515px;
border-radius: 6px;
outline: none;
font-size: 15px;
background: rgb(169, 238, 255);
}
.popup {
width: 100vw;
height: 100vh;
position: fixed;
background: rgba(0, 0, 0, .3);
left: 0;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.pop-content {
width: 700px;
background: #fff;
border-radius: 10px;
overflow: hidden;
padding-bottom: 20px;
}
.reply p {
margin-top: 10px;
background: rgba(100, 100, 100, .1);
}
</style>
</head>
<body>
<div class="bacground">
<div class="head">留言板</div>
<input class="name" type="text" placeholder="请输入您的昵称">
<textarea class="content" placeholder="请保持言论文明......"></textarea>
<button class="btn">留言</button>
<h3>大家在说</h3>
<ul class="text">
<!-- <li>
<div class="message-head">
<span class="photo">系统</span>
<p class="time">2019-9-27 0:47:38</p>
</div>
<p class="liuyan">测试留言</p>
<div class="reply">
<p>测试回复</p>
</div>
<button class="delete">Delete</button>
<button class="answer">Answer</button>
</li> -->
</ul>
</div>
<div class="popup">
<div class="pop-content">
<div class="pop-head">回复板</div>
<textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
<button class="pop-btn huiFu">回复</button>
<button class="pop-btn quXiao">取消</button>
</div>
</div>
<script>
//在事件委托中，每一个if都相当于一个独立的函数，因为每一次点击都会重新触发事件处理函数
var oAns ;
//分析：事件委托给谁？ --- 共同的父元素
document.onclick = function (e) {
//事件处理对象，兼容IE8及以下版本的浏览器
e = e || event ;
// target目标 --- 具体是由哪个标签触发的
var target = e.target ;
//留言
if(target.className === 'btn'){
//获取对象
var nickname = $('.name').value ;
var content = $('.content').value ;
//判断输入是否为空
if(nickname && content){
//创建一个标签
var oLi = document.createElement('li') ;
//插入新内容
oLi.innerHTML = `
<div class="message-head">
<span class="photo">${nickname}</span>
<p class="time">2019-9-27 0:47:38</p>
</div>
<p class="liuyan">${content}</p>
<div class="reply">
</div>
<button class="delete">Delete</button>
<button class="answer">Answer</button>
`
//将最新的留言插入到最上面
$('.text').insertBefore(oLi , $('.text').firstChild) ;
//倒计时
clock(target , 3) ;
//留言完后清空留言板内容
$('.content').value = '' ;
}else{
alert('输入不能为空！')
}
return
}
//删除
if(target.className === 'delete'){
//删除留言
target.parentNode.remove() ;
return
}
//回复
if(target.className === 'answer'){
//显示弹窗
$('.popup').style.display = 'flex' ;
//找到回复留言的地方
oAns = target.previousElementSibling.previousElementSibling ;
return
}
//确认回复
if(target.className === 'pop-btn huiFu'){
//拿到回复的内容
var huiFuContent = $('.pop-reply').value ;
if(huiFuContent){
//创建一个标签
var oP = document.createElement('p') ;
//将内容插入标签中
oP.innerHTML = huiFuContent ;
//将回复插入到留言的地方
oAns.appendChild(oP) ;
}
//关闭弹窗
$('.popup').style.display = 'none' ;
return
}
//取消回复
if(target.className === 'pop-btn quXiao'){
$('.popup').style.display = 'none' ;
return
}
}
//倒计时
function clock(ele , time){
if(!ele.disabled){
ele.disabled = true ;
ele.innerHTML = time + 's后可再次留言' ;
var t = setInterval(function () {
time-- ;
ele.innerHTML = time + 's后可再次留言' ;
if(time <= 0){
clearInterval(t) ;
ele.disabled = false ;
ele.innerHTML = '留言' ;
}
},1000)
}
}
//获取对象
function $(selector){
return document.querySelector(selector) ;
}
</script>
</body>
</html>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
JavaScript实现网页留言板功能
JavaScript(JS)网页–留言板,供大家参考,具体内容如下 在使用网页进行冲浪时,经常会发表自己的留言.发布留言的留言板是怎么做的呢? 制作一个简单的留言板. 首先需要一个textarea框,旁边放置一个按钮,然后需要一个ul标签,里面不需要放置li元素,用CSS加以简单的修饰. 紧接着获取元素,在点击按钮后,创建一个li,将文本框里面的赋值给li,将li插入到ul的第一个孩子的前面. <!DOCTYPE html> <html lang="zh-CN">
-
JavaScript事件委托原理
目录 一.什么是事件委托 二.事件委托的原理 三.事件委托的作用 一.什么是事件委托 事件委托也称为事件代理.就是利用事件冒泡,把子元素的事件都绑定到父元素上.如果子元素阻止了事件冒泡,那么委托就无法实现. 举个简单的例子: 例如快递员有100个快递要分别送给100个学生, 如果一个个的送花费时间较长.同时每个学生领取的时候,也需要排队领取,也花费时间较长,应该怎样操作呢?这时快递员可以把100个快递委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可.这样的话,快递员省事,同学们领
-
JS中的事件委托实例浅析
本文实例讲述了JS中的事件委托.分享给大家供大家参考,具体如下: 事件委托(也叫事件代理),其实这个问题也简单,要想弄明白事件委托,我们先要把事件冒泡的机制搞清楚.举个事件冒泡的例子: <ul> <li>点击</li> </ul> <script> var ul=document.getElementsByTagName('ul')[0]; var li=document.getElementsByTagName('li')[0]; ul.add
-
原生JS实现留言板
本文实例为大家分享了JS实现留言板的具体代码,供大家参考,具体内容如下 一.设计思路 这个留言板有两个大的版块,一个是留言板(主要是发布留言的内容会在上面显示),另一个是发布留言(可以在这里输入你想要留言的内容等).下图是留言版做成的样子: 主要用到input textarea button img div等:还用到了date对象的知识来获取时间,innerHTML来修改span中的内容.之后就是使用DOM的知识来实现这些功能. 二.代码 html <body οnlοad="f3()&q
-
js实现web留言板功能
本文实例为大家分享了js实现web留言板的具体代码,供大家参考,具体内容如下 1.画一个标题栏和一个内容栏,提交按钮,留言板 心情:<br/> <input type="text" id="mood"/><br/> 笔记:<br/> <textarea id="network"></textarea><br/> <button id="send&q
-
js事件委托详解
1.每个函数都是对象,占用内存.内存中的对象越多,性能越差.解决事件处理过多问题的办法是事件委托. 2.事件委托冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 实例 <ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text
-
一篇文章告诉你如何用事件委托实现JavaScript留言板功能
用事件委托实现留言板功能. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
-
一篇文章告诉你如何用python进行自动化测试,调用c程序
目录 一.介绍 二.方法 三.示例 windows平台 1.编写搭建动态库c函数 2.python导入库 3.结果 linux平台 1.编写c程序 2.编译成so动态库 3.编写python导入库 4.执行 总结 一.介绍 python可以做测试c的程序, 用到ctypes模块 ctypes 有以下优点: Python内建,不需要单独安装 可以直接调用二进制的动态链接库 在Python一侧,不需要了解Python内部的工作方式 在C/C++一侧,也不需要了解Python内部的工作方式 对基本类型
-
一篇文章告诉你如何用Python控制Excel实现自动化办公
目录 1.安装 2.操作一个简单的Excel文档 3. 操作简单Excel文档并添加数据格式 4.Excel中添加不同类型的数据 5.Excel中添加数据图表 最后:可能给予你助力的教程 总结 1.安装 2.操作一个简单的Excel文档 操作注释及代码: 操作完成后,数据存储结果如下: 3. 操作简单Excel文档并添加数据格式 操作代码如下: 附带数据格式的定义 操作效果如图所示: 4.Excel中添加不同类型的数据 操作代码如下: 将不同的数据按照指定的格式添加到文件中 代码执行结果如下:
-
一篇文章告诉你如何实现Vue前端分页和后端分页
目录 1:前端手写分页(数据量小的情况下) 2:后端分页,前端只需要关注传递的page和pageSize 总结 1:前端手写分页(数据量小的情况下) 前端需要使用slice截取: tableData((page-1)pageSize,pagepageSize) 2:后端分页,前端只需要关注传递的page和pageSize 3:前端手写分页按钮 <body> <div id="app"> <table class="table table-bord
-
一篇文章教你如何用C语言实现strcpy和strlen
目录 自己实现strcpy.strlen strcpy的实现 strlen的实现 总结 自己实现strcpy.strlen strcpy的实现 思路: 通过指针访问地址然后将要copy的文本逐一复制到目的地. void my_strcpy(char* dest, char* src){ while (*src !='\0'){ *dest = *src; src++; dest++; } *dest = *src; } //自己实现strcpy int main(){ char arr1[]="
-
一篇文章告诉你JAVA Mybatis框架的核心原理到底有多重要
目录 持久层的那些事 什么是 JDBC JDBC 原理 什么是 Mybatis Mybatis 与 JDBC 的关系 SqlSession SqlSessionFactory SqlSessionFactoryBuilder Configuration MappedStatement Executor ParameterHandler StatementHandler ResultSetHandler Interceptor Mybatis 关键词说明 Mybatis 架构设计 基础支持层 反射
-
一篇文章教你如何用多种迭代写法实现二叉树遍历
目录 思想 实现 总结 思想 利用栈和队列都可以实现树的迭代遍历.递归的写法将这个遍历的过程交给系统的堆栈去实现了,所以思想都是一样的.无非就是插入值的时机不一样.利用栈的先进先出的特点,对于前序遍历.我们可以先将当前的值放进结果集中,表示的是根节点的值.然后将当前的节点加入到栈中.当前的节点等于自己的left.再次循环的时候.也会将left作为新的节点.直到节点为空.也就是走到了树的最左边.然后回退.也就是弹栈..也可以认为回退的过程是从低向上的.具体就是让当前的节点等于栈弹出的right.继
-
一篇文章带了解如何用SpringBoot在RequestBody中优雅的使用枚举参数
目录 确认需求 定义枚举和对象 实现转换逻辑 方案一:精准攻击 方案二:全范围攻击 测试 总结 确认需求 需求与前文类似,只不过这里需要是在 RequestBody 中使用.与前文不同的是,这种请求是通过 Http Body 的方式传输到后端,通常是 json 或 xml 格式,Spring 默认借助 Jackson 反序列化为对象. 同样的,我们需要在枚举中定义 int 类型的 id.String 类型的 code,id 取值不限于序号(即从 0 开始的 orinal 数据),code 不限于
-
一篇文章教你如何用Java自定义一个参数校验器
目录 注解 校验器 异常处理 测试 总结 自定义一个唯一字段校验器 注解 @Target({ElementType.FIELD}) @Retention(RetentionPolicy.RUNTIME) @Documented @Constraint(validatedBy = {IsUniqueValidator.class}) // 指定自定义的校验器 public @interface IsUnique { // 提示信息 String message() default "";
-
一篇文章告诉你如何在Java数组中插入一个字符
目录 定义一个数组 定义插入的字符 打印插入之前字符排列顺序 假设插入位置 找到插入位置 数组数据下移 移入数值 输出数组 总结 定义一个数组 public class charInsert { public static void main(String[] args) { // 这是字符数组 char[] ch = new char[9]; ch[0] = 'a'; ch[1] = 'b'; ch[2] = 'c'; ch[3] = 'f'; ch[4] = 'g'; ch[5] = 'i'