利用JavaScript实现发表、修改、删除评论

要用js实现这些功能，首先我们分析一下需要做什么
1.再文本框写评论
2.创建一个能储存写好的评论的地方，我们一般用无序列表li来储存
3.li不能让它固定，所以我们也需要用js来动态创建
4.肯定要在已经发布的评论哪里删除，也就是说，再创建的li中在创建两个按钮
那么大致的html就只需要创建一个文本框和一个发表评论的按钮就够了，为了方便，ul也可以先创建好：

<div class="bigBox w"><textarea name="" id="txt" cols="30" rows="10"></textarea><div class="btnBox"><button id="btn">发布评论</button></div><ul id="utxt"></ul>

然后我们用css美化一下，这里我们虽然没有创建储存评论的li标签以及修改删除按钮，但是可以先将它的css写好：

<style>* {margin: 0;padding: 0;}.w {width: 600px;margin: 0 auto;}.bigBox {width: 600px;margin-top: 20px;}textarea {width: 600px;height: 100px;border: 0;outline: 0;border: 1px solid black;resize: none;padding: 20px;box-sizing: border-box;}.btnBox {width: 100%;height: 40px;position: relative;}#btn {display: block;width: 100px;height: 40px;position: absolute;right: 0;background-color: #FF7D40;border: 0;color: #fff;}ul li {width: 600px;height: 60px;line-height: 60px;background-color: #3c3c3c;color: #fff;margin-top: 10px;padding: 0 20px;list-style: none;box-sizing: border-box;}ul li a {float: right;text-decoration: none;color: #fff;}ul li input {float: right;margin: 20px 16px 0 0;}

看看效果：

接下来写JavaScript代码来实现它的功能：

<script>//通过id获取标签var txt = document.getElementById("txt")var btn = document.getElementById("btn")var utxt = document.getElementById("utxt")//创建点击事件btn.onclick = function () {//判断是否输入了评论if (txt.value === "") { //这个表达式表示没有文本输入alert("请输入评论") //弹窗提醒} else { //如果有文本输入就执行下面的代码//创建li标签var li = document.createElement("li")//将输入的内容赋给lili.innerText = txt.value//同时清空输入框txt.value = ""}//将li标签放入ul标签中utxt.appendChild(li)//创建删除按钮，用a标签来创建var del = document.createElement("a")//给a标签属性del.href = "#"del.innerHTML = "删除"//删除按钮的点击事件del.onclick = function () {//删除自己的父元素，也就是删除按钮所在的lidel.parentNode.remove()txt.value = ""}//将删除按钮放入li中li.appendChild(del)//创建修改按钮var xg = document.createElement("input")xg.type = "button"xg.value = "修改"// var box = document.createElement("input")xg.onclick = function () {//点击修改后弹出输入框，并且将文本内容赋给livar i = prompt("请输入修改的内容")this.parentNode.innerText = i//重新添加删除修改按钮li.appendChild(del)li.appendChild(xg)}//给li添加修改按钮li.appendChild(xg)}</script>

最后看一看效果：
没有输入评论时：

输入评论并点击发表：

点击修改：

点击删除就会将这条评论删掉

这样我们就实现了评论的发表修改及删除了

利用JavaScript实现发表、修改、删除评论相关推荐

项目之删除评论、修改评论及架构--Kafka简介(14)
78. 删除评论-持久层 (a)规划需要执行的SQL语句需要执行的SQL语句大致是: delete from comment where id=? 通常,在处理增.删.改之前,还存在相关的检查,特别 ...
JSP中在网页中发表删除评论以及分页安放数据
一.发表评论首先我们要接收评论人的编号,再接收IP,还需要获取新闻编号,我们发表的评论需要添加进数据库才能算评论成功,所以我们需要连接数据库,然后使用sql语句添加,再进行判断,设置了弹框,如果弹出 ...
mysql利用触发器删除数据库_[数据库]mysql 触发器的创建修改删除
[数据库]mysql 触发器的创建修改删除 0 2015-12-16 23:00:04 //做一个简单的练习,创建一个简单的触发器完成添加文章的时候,自动加上时间,默认作者为 '日记本的回忆' ...
阅读新闻页面绑定新闻评论+添加评论+删除评论+admin页面数据分页
继上面功能之后的新功能一.添加评论首先是我们的admin界面展示其次是我们的read_news界面展示 a.首先从read_news界面的from表单跳转至doadd_ptext界面. < ...
这是如何更好地利用JavaScript数组的方法
by pacdiv 由pacdiv 这是如何更好地利用JavaScript数组的方法 (Here's how you can make better use of JavaScript arrays) ...
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法 rem是css3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素字体大小就可以成比例地调整所有字体大小.我 ...
添加和删除评论功能网页的实现
DOM是Document Object Model(文本对象模型)的简称,是表示文档和访问操作构成文档的各种元素的应用程序接口(API).它提供了文档中独立元素的结构化.面向对象的表示方法,并允许通过 ...
wordpress怎么修改html,WordPress后台编辑器HTML模式界面中添加修改删除按钮
在WordPress编辑器HTML模式界面中添加按钮一文中,我大致介绍了怎么在后台添加一些自定义的按钮,本文则更为详细全面的对wordpress后台编辑器HTML模式下的按钮自定义进行详解,以让开发 ...
linux下运行js挖矿,利用 JavaScript 代码挖矿
我们都知道,现在的比特币特别的火,但是错过了最好时代的我们,已经玩不起那个动不动就几万的矿机以及还需要翻山越岭迁移到深山发电站的决心.何况,目前比特币已经不再是如同神话一般的不断开创历史新高,该来的矿 ...

利用JavaScript实现发表、修改、删除评论

利用JavaScript实现发表、修改、删除评论相关推荐

最新文章

热门文章