JavaScript之留言板制作

本文主要介绍留言板的制作，用户可对新闻消息进行评论，发表之后评论会被置于顶端，点击相应删除按钮即可删除。本文主要介绍三种方式，区别在于如何实现评论的删除。

1.利用函数局部作用域

在函数的局部作用域内完成删除事件的绑定，可以实现“点哪个删哪个评论”的效果。代码如下：

<!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>* {margin: 0;padding: 0;}p {text-indent: 2em;font-size: 20px;line-height: 30px;margin: 15px auto;text-align: justify;}textarea {width: 1200px;resize: none;margin: 10px 0;outline: none;font-size: 30px;}.center {width: 1200px;margin: 20px auto 0;}.btn::after {display: block;content: '';clear: both;}input {font-size: 20px;}input:first-of-type {float: left;}input:last-of-type {float: right;}/* 评论区域 */#comment {margin-top: 50px;}#comment div {text-indent: 2em;position: relative;font-size: 20px;line-height: 30px;height: 120px;background-color: #f8f8f8;margin: 10px 0;overflow: auto;border-radius: 20px;}#comment div section {position: absolute;bottom: 5px;right: 5px;}#comment div span {position: absolute;top: 0;right: 10px;font-size: 25px;text-align: center;width: 40px;height: 40px;border-radius: 50%;line-height: 40px;background-color: #ccc;/* 取消继承获得的属性 */text-indent: 0;}#comment span:hover {cursor: pointer;background-color: #999;}</style>
</head><body><div class="center"><p>中国天气网讯 近期，我国北方多地高温热浪肆虐，持续时间之长、强度之强同期少见，中央气象台已连续10天发布高温预警。昨天（6月23日）开始，南方多地也加入高温“群聊”，今后三天，超20省市区将接受高温酷暑的“烤验”，河南、内蒙古、新疆的一些地区最高气温可达40℃以上，热到想哭。中国天气网特别推出全国热哭预警地图，看看到底哪里会让你热到怀疑人生。#全国热哭预警地图来了# 全国热哭预警地图出炉 看哪里“热到蒸发” 今天，我国将呈现南蒸北烤的局面。其中，河南大部、河北南部、苏皖北部、湖北北部、陕西东南部等地以及新疆东部、内蒙古西部的部分地区为本轮高温的核心区域，烈日炎炎，体感温度或超过37℃，局地甚至超过40℃，简直“热到蒸发”，而且这一带区域夜间气温也居高不下，小伙伴们将体验“白天黑夜连轴热”；刚告别多雨局面的江南、华南也加入了“高温闷热战队”，福建、浙江、江西、广东、广西西南部以及海南等地体感温度超过35℃，加上空气湿度较大，非常闷热，桑拿感明显，当地小伙伴可能大汗淋漓，仿佛瞬间“融化”。</p><h1>留言板</h1><form><textarea rows="4"></textarea><div class="btn"> <input type="submit"><input type="reset"></div></form><div id="comment"></div></div><script>var form = document.querySelector('form');var textarea = document.querySelector('textarea');var comment = document.querySelector('#comment');form.onsubmit = function(e) {e.preventDefault();var d = new Date(),time;time = '发表时间：' + d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' + d.getSeconds() + '秒';var div = document.createElement('div');var text = document.createTextNode(textarea.value);var section = document.createElement('section');var timeInfo = document.createTextNode(time);// 创建删除按钮var span = document.createElement('span');span.appendChild(document.createTextNode('×'));div.appendChild(span);div.appendChild(text);// 给创建的删除按钮绑定事件，可完成评论的删除span.onclick = function() {this.style.display = 'none';div.style.display = 'none';}section.appendChild(timeInfo);comment.insertBefore(div, comment.children[0]);div.appendChild(section);}</script>
</body></html>

2.利用事件委托

通过事件委托的方式，给评论模块的父级绑定事件，通过e.target属性的应用完成删除功能。代码如下：

<!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>* {margin: 0;padding: 0;}p {text-indent: 2em;font-size: 20px;line-height: 30px;margin: 15px auto;text-align: justify;}textarea {width: 1200px;resize: none;margin: 10px 0;outline: none;font-size: 30px;}.center {width: 1200px;margin: 20px auto 0;}.btn::after {display: block;content: '';clear: both;}input {font-size: 20px;}input:first-of-type {float: left;}input:last-of-type {float: right;}/* 评论区域 */#comment {margin-top: 50px;}#comment div {text-indent: 2em;position: relative;font-size: 20px;line-height: 30px;height: 120px;background-color: #f8f8f8;margin: 10px 0;overflow: auto;border-radius: 20px;}#comment div section {position: absolute;bottom: 5px;right: 5px;}#comment div span {position: absolute;top: 0;right: 10px;font-size: 25px;text-align: center;width: 40px;height: 40px;border-radius: 50%;line-height: 40px;background-color: #ccc;/* 取消继承获得的属性 */text-indent: 0;}#comment span:hover {cursor: pointer;background-color: #999;}</style>
</head><body><div class="center"><p>中国天气网讯 近期，我国北方多地高温热浪肆虐，持续时间之长、强度之强同期少见，中央气象台已连续10天发布高温预警。昨天（6月23日）开始，南方多地也加入高温“群聊”，今后三天，超20省市区将接受高温酷暑的“烤验”，河南、内蒙古、新疆的一些地区最高气温可达40℃以上，热到想哭。中国天气网特别推出全国热哭预警地图，看看到底哪里会让你热到怀疑人生。#全国热哭预警地图来了# 全国热哭预警地图出炉 看哪里“热到蒸发” 今天，我国将呈现南蒸北烤的局面。其中，河南大部、河北南部、苏皖北部、湖北北部、陕西东南部等地以及新疆东部、内蒙古西部的部分地区为本轮高温的核心区域，烈日炎炎，体感温度或超过37℃，局地甚至超过40℃，简直“热到蒸发”，而且这一带区域夜间气温也居高不下，小伙伴们将体验“白天黑夜连轴热”；刚告别多雨局面的江南、华南也加入了“高温闷热战队”，福建、浙江、江西、广东、广西西南部以及海南等地体感温度超过35℃，加上空气湿度较大，非常闷热，桑拿感明显，当地小伙伴可能大汗淋漓，仿佛瞬间“融化”。</p><h1>留言板</h1><form><textarea rows="4"></textarea><div class="btn"> <input type="submit"><input type="reset"></div></form><div id="comment"></div></div><script>var form = document.querySelector('form');var textarea = document.querySelector('textarea');var comment = document.querySelector('#comment');form.onsubmit = function(e) {e.preventDefault();var d = new Date(),time;time = '发表时间：' + d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' + d.getSeconds() + '秒';var div = document.createElement('div');var text = document.createTextNode(textarea.value);var section = document.createElement('section');var timeInfo = document.createTextNode(time);// 创建删除按钮var span = document.createElement('span');span.appendChild(document.createTextNode('×'));div.appendChild(span);div.appendChild(text);section.appendChild(timeInfo);comment.insertBefore(div, comment.children[0]);div.appendChild(section);}comment.addEventListener('click', function(e) {if (e.target.nodeName == 'SPAN') {this.removeChild(e.target.parentNode);}})</script>
</body></html>

3.利用jQuery的事件委托

从上面我们可以看到，事件委托的对象包含了父级元素的所有子级元素。若是想指定一个子元素进行绑定，该如何操作？这里将介绍jQuery是如何进行事件委托的。换一个案例进行讲解，本质是相同的。下面的案例利用jQuery进行事件委托，在点击时通过父级ul为子级a标签绑定了点击事件。代码如下：

<!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>jQuery事件委托制作留言板</title><style>li {position: relative;width: 1000px;}a {position: absolute;right: 0;cursor: pointer;}a:hover {color: red;}</style><script src="./jQuery.min.js"></script>
</head><body><input type="text"> <input type="submit"><ul class="ul"></ul><script>var inputs = document.querySelectorAll('input');var ul = document.querySelector('ul');inputs[1].onclick = function() {var li = document.createElement('li');li.innerHTML = inputs[0].value;var a = document.createElement('a');a.innerHTML = '删除';li.appendChild(a);ul.insertBefore(li, ul.children[0]);/*  a.onclick = function() {li.style.display = 'none';} */};// jQuery事件委托的优点：可以指定委托的的元素，而不是利用事件对象，更具针对性$('.ul').on('click', 'a',function() {this.parentElement.style.display = 'none';})</script>
</body></html>

效果如图：

JavaScript之留言板制作相关推荐

javascript简易留言板制作 -- 案例
js简易留言板制作 @Draven 效果预览 html部分 css部分 js部分效果预览 html部分 <textarea name="text" cols="3 ...
布尔教育php视频下载,布尔教育2016视频：PHP留言板制作教程
1. 将 POST 中的数据 ( 原材料 ) 提交到 mysql 中我们要先准备好 mysql 中的表 ; 2.php 接收到的 POST 数据想办法写到 mysql 中 ; mysql_conne ...
html模板留言板mysql_Php+mysql+html简单留言板制作
数据库两个一个用来储存用户信息,一个用来存储留言信息首先给大家展示下效果图 1.下面就开始我留言板制作:首先设计我们登陆页面,首先我们需要搭建一个登录页面,denglu.php如下图, dengl ...
jsp mysql留言板制作_Jsp+mysql 制作留言板
最近大致了解了下什么是JSP,然后制作了一個小的留言板,這里寫一點制作留言板的過程,希望能給大家幫助! 一.准備工作(安裝各種所需要用到的軟件) 2.tomcat 下載地址 3.mysql ...
[练习]简易留言板制作
[练习]简易留言板制作
JavaScript实现留言板
目录 1.案例说明: 2.html部分 3.css部分 4.js代码 5.全部代码 6.效果图: 1.案例说明: 利用JavaScript.css以及html制作一个简易的留言板要求在页面文本框中输 ...
PHPCMS留言板制作
资源文件在文章最后的网盘链接里,请先把大体流程看一遍方法来自网上整理后发布,改进了几处,比如表单信息提交后不关闭框架,原文formid值未提示修改,index.html第四处修改地方也不对等等! ...
JavaWeb-简易留言板制作【MVC】
Java+Servlet+JSP 采用MVC模式(Model+View+Controller) 功能: 项目的主要模块:注册模块,登陆模块,留言列表模块,留言模块,留言详情模块. 注册模块:实现用户注 ...
JavaScript动态留言板设计
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...

JavaScript之留言板制作

1.利用函数局部作用域

2.利用事件委托

3.利用jQuery的事件委托

JavaScript之留言板制作相关推荐

最新文章

热门文章