html简单留言板教程,JS实现简易留言板(节点操作)
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下
今天的案例主要是对节点进行操作
创建节点、添加节点、删除节点以及为节点添加内容的操作。
就是一个简单的留言板功能,可以发布留言,删除留言。
主要思路:两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件
发布按钮事件:首先在文档中创建li节点。然后第二步,先把文本域中的内容获取出来赋给li,这里要注意,文本域是表单元素,获取表单元素的内容是使用表单的特有属性value,要与普通元素获取内容的innerHTML进行区分;再把删除链接添加到li中,利用字符串拼接的方式。最后把li节点添加到ul中,添加的方式有两种,是直接添加到ul列表项的末尾,也可以添加到指定位置。这里我是选中插入到ul列表的最前面。
删除按钮事件:点击删除按钮的事件是在把创建的li添加到ul中之后定义的。删除的操作主要是要弄清除是父节点元素删除子节点元素。在这里点击删除链接,删除的是当前被点击的按钮所在的li。li是删除连接的父节点元素。
分析永远比敲代码重要。要先分析,再去敲代码,实现需求。
先看效果图吧
默认是没有任何内容的
在文本域中输入,点击发布,可以发布留言,如果发完想删除,可以点击里面的删除按钮,删除留言
删除操作后:
JS代码:
// 点击发布,会把文本域中的内容发布到ul中
// 点击删除,会删除留言
// 1.获取事件源 文本域 按钮 文本域
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// 2.注册点击事件
btn.onclick = function () {
// 首先会创建一个li 并把文本域的内容给li 再把li添加到ul中
var li = document.createElement('li');
if (text.value == '') {
alert('您没有输入内容')
} else {
// 文本域的值 value
// 增加一个删除留言的按钮
li.innerHTML = text.value + '删除';
ul.insertBefore(li, ul.children[0]); // 把最新的发布放到最前面
// ul.appendChild(li);
// 3.注册删除点击事件
var removeBtn = document.querySelectorAll('a');
for (var i = 0; i < removeBtn.length; i++) {
removeBtn[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
}
全部代码:
留言板
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
发布
// 点击发布,会把文本域中的内容发布到ul中
// 点击删除,会删除留言
// 1.获取事件源 文本域 按钮 文本域
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// 2.注册点击事件
btn.onclick = function () {
// 首先会创建一个li 并把文本域的内容给li 再把li添加到ul中
var li = document.createElement('li');
if (text.value == '') {
alert('您没有输入内容')
} else {
// 文本域的值 value
// 增加一个删除留言的按钮
li.innerHTML = text.value + '删除';
ul.insertBefore(li, ul.children[0]); // 把最新的发布放到最前面
// ul.appendChild(li);
// 3.注册删除点击事件
var removeBtn = document.querySelectorAll('a');
for (var i = 0; i < removeBtn.length; i++) {
removeBtn[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html简单留言板教程,JS实现简易留言板(节点操作)相关推荐
- android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
- php简易留言板功能,php实现简易留言板效果
首先是Index页面效果图 index.php date_default_timezone_set('PRC');$filename="msg.txt";$msgs=[];//检测 ...
- android 简易涂鸦板,canvas实现的简易涂鸦板效果
用canvas实现的简易涂鸦板效果,用鼠标点击在画布上随意涂鸦 涂鸦 *{ margin: 0; padding: 0; } #canvas1{ box-shadow: 0 5px 40px blac ...
- JS实现简易留言板功能
一.分析 1.留言板功能 ①发布评论 ②删除评论 2.发布功能 ①发布评论前判断评论框(用textarea输入评论)是否为空 ②点击发布按钮,发布评论(用li展示评论,开始评论为空,html部分< ...
- html简易留言,JS实现简易留言板特效
本文实例为大家分享了JS实现留言板特效的具体代码,供大家参考,具体内容如下 知识点 1.textarea 大段输入框 2.value获取输入框的值 3.innerHTML所用东西:innerText文 ...
- js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明 利用JavaScript.css以及html ...
- php简易留言板功能,php简单的留言板与回复功能具体实现
php简单的留言板与回复功能具体实现 留言板是在刚接触php时用来学习的一个简单的应用例子了,今天我再给初学php的朋友提供一个完整的php留言板的全部制作过程,希望对你会有帮助 在网上找了这方面的教 ...
- java 留言板源码_jsp+servlet+javabean实现简易留言板(包含数据库文件)
[实例简介] jsp+servlet+javabean实现简易留言板(包含数据库文件) 简单体验MVC设计模式 jsp:视图,与用户打交道:servlet:控制器,请求分配转发,联系视图层与模型层:j ...
- javascript简易留言板制作 -- 案例
js简易留言板制作 @Draven 效果预览 html部分 css部分 js部分 效果预览 html部分 <textarea name="text" cols="3 ...
最新文章
- 查看cpu使用率_腾讯游戏开发工程师:Linux 机器 CPU 毛刺问题排查
- 新来的 不知道写什么呢
- 二线城市IT人员如何发展
- Linux下挂载ISO文件
- 确认类是否可以在运行期使用
- 一个简单易用的导出Excel类
- 链表的分解(C++)
- 表达式求值(NOIP2013 普及组第二题)
- 当你想对常用网站定制属于自己的颜色,然而又没人理你怎么办
- 【SQL server】数据库的彻底卸载
- 分享一波 Altium Designer超全封装库(带3D模型)
- 从键盘输入二叉树怎么输入_手机输入法派别之争!九宫格和全键盘谁才是正统...
- h264格式视频转mp4
- 缺少计算机所需的介质驱动程序6,缺少计算机所需的介质驱动程序解决办法
- 云流送技术可以支持多人交互吗?
- java 标签的制作
- 在线培训-虚拟演播室嵌入网页直播
- sendcloud php,Sendcloud的x_smtpapi具体如何定义?
- mysql常用表名大全_MySQL常用系统表大全
- 计算机工程学院迎新生,计算机工程学院举办“青春相约,梦想同行”迎新晚会...
热门文章
- 【论文阅读】Spelling Error Correction with Soft-Masked BERT
- [FPGA/Vivado/ILA]Vivado的ILA核在Waveform界面无任何变化,抓取不到信号和数据
- JavaWeb问题记录——IDEA换了图片前端不更新。
- 计算轮廓的特征参数(周长、面积、圆形度、周径比等)
- Deep Knowledge Tracing with Transformers论文阅读
- win10直接打开服务器文档,win10如何打开数据库服务器
- python课后题答案第三章_python程序设计基础课后习题答案(电子版,可复制)第三章...
- 十大经典排序算法动画,看我就够了!
- k8s控制器Deployment使用详解
- 深度学习—— caffe下进行微调finetune