JS实现简单的评论与删除功能

一、实现样式

二、使用知识点

1、节点

父节点node.parentNode、子节点parentNode.children

2、DOM节点操作

createElement(创建节点)、insertBefore(前面插入节点)、removeChild(删除节点)

3、时间函数

function getNowTime() {var date = new Date();//年 getFullYear()：四位数字返回年份var year = date.getFullYear(); //getFullYear()代替getYear()//月 getMonth()：0 ~ 11var month = date.getMonth() + 1;//日 getDate()：(1 ~ 31)var day = date.getDate();//时 getHours()：(0 ~ 23)var hour = date.getHours();//分 getMinutes()： (0 ~ 59)var minute = date.getMinutes();//秒 getSeconds()：(0 ~ 59)var second = date.getSeconds();//绑定时间标签var commTime = document.querySelector(".time")  var time = year + '-' + addZero(month) + '-' + addZero(day);commTime.innerHTML = time;}
//小于10前面加0function addZero(s) {return s < 10 ? ('0' + s) : s;}
}

三、核心点

1、css样式注意布局样式，一些标签是js所创建的。
2、删除a标签绑定，删除removeChild节点功能写在发布标签函数里面，写在外面不会生效，因为页面加载完没有a标签，绑定会失败。

    combtn.addEventListener('click', function() {//添加标签if (!commBox.value) {console.log("评论为空");} else {var li = document.createElement("li");li.innerHTML = "<img src='./img/headimg.jpg'>" + "<span>Henry</span> <span class='time'></span>" + "<p>" + commBox.value + "</p>" + "<a href='javascript:;'>删除</a>";ul.insertBefore(li, ul.children[0]);getNowTime();commBox.value = '';//删除评论   写在评论函数里面。不然页面加载没有a标签无法绑定var del = document.querySelectorAll("a");for (var i = 0; i < del.length; i++) {del[i].onclick = function() {ul.removeChild(this.parentNode);}}}})

附录

HTML

<!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>comment</title><link rel="stylesheet" href="./comment.css"><script src="./comment.js"></script>
</head>
<body><div class="comtext"><img src="./img/headimg.jpg" alt=""><textarea name="" id="commBox" cols="70" rows="12" placeholder="请输入评论..."></textarea><input type="submit" name="" id="" value="评  论" class="combtn" /></div><div class="comment"><ul><li><img src="./img/headimg1.jpg" alt=""> <span>Jvascript</span><p>123</p></li><li><img src="./img/headimg1.jpg" alt=""> <span>Jvascript</span><p>123</p></li><li><img src="./img/headimg1.jpg" alt=""><span>Jvascript</span><p>123</p></li></ul></div>
</body>
</html>

CSS

        * {margin: 0 auto;padding: 0 auto;}a {text-decoration: none;}ul li {list-style: none;margin-top: 10px;width: 500px;height: 150px;position: relative;border: 1px solid #f2f2f2;padding: 0 10px;}.comtext img {width: 40px;height: 40px;border-radius: 50%;position: absolute;left: -100px;top: 62px;}li a {float: right;text-decoration: none;color: #777888;font-size: 14px;margin-top: 30px;}li img {width: 40px;height: 40px;border-radius: 50%;margin-top: 10px;}li span {color: #777888;margin-left: 45px;margin-top: -35px;display: block;}li p {position: absolute;top: 70px;left: 55px;font-size: 16px;font-family: SimSun;}.time {color: 777888;font-size: 14px;margin-top: -17px;margin-left: 100px;}.comtext {width: 400px;height: 460px;/* border: 1px solid black; */text-align: center;position: relative;/* display: none; */}#commBox {position: absolute;left: -44px;margin: 60px auto;border-radius: 5px;resize: none;outline: none;font-size: 16px;}.combtn {position: absolute;right: -135px;bottom: 132px;background-color: #0090CE;font-size: 16px;color: #fff;border-radius: 5px;margin-top: 20px;text-align: center;cursor: pointer;outline: none;}.close {position: absolute;right: 5px;top: 2px;cursor: pointer;}

//新增评论
window.onload = function() {var commBox = document.querySelector("#commBox");var ul = document.querySelector("ul");var comtext = document.querySelector(".comtext");var combtn = document.querySelector(".combtn");//评论模块combtn.addEventListener('click', function() {//添加标签if (!commBox.value) {console.log("评论为空");} else {var li = document.createElement("li");li.innerHTML = "<img src='./img/headimg.jpg'>" + "<span>Henry</span> <span class='time'></span>" + "<p>" + commBox.value + "</p>" + "<a href='javascript:;'>删除</a>";ul.insertBefore(li, ul.children[0]);getNowTime();commBox.value = '';//删除评论   写在评论函数里面。不然页面加载没有a标签无法绑定var del = document.querySelectorAll("a");for (var i = 0; i < del.length; i++) {del[i].onclick = function() {ul.removeChild(this.parentNode);}}}})//获取时间function getNowTime() {var date = new Date();//年 getFullYear()：四位数字返回年份var year = date.getFullYear(); //getFullYear()代替getYear()//月 getMonth()：0 ~ 11var month = date.getMonth() + 1;//日 getDate()：(1 ~ 31)var day = date.getDate();//时 getHours()：(0 ~ 23)var hour = date.getHours();//分 getMinutes()： (0 ~ 59)var minute = date.getMinutes();//秒 getSeconds()：(0 ~ 59)var second = date.getSeconds();var commTime = document.querySelector(".time")var time = year + '-' + addZero(month) + '-' + addZero(day);commTime.innerHTML = time;}function addZero(s) {return s < 10 ? ('0' + s) : s;}
}

JS实现简单的评论与删除功能相关推荐

php中删除评论怎么做的,php实现评论回复删除功能
简单的评论回复删除功能,具体内容如下一.数据库建立两张表,一是pinglun表:二是huifu表效果如下: 代码如下: 1.主页面 main.php 无标题文档朋友圈内容: 今天很嗨 que ...
html消息页左滑删除模板,基于JS实现移动端左滑删除功能
基于JS实现移动端左滑删除功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于JS实现移动端左滑删除功能,编程之家小编觉得挺不错的,现 ...
html5实现下拉刷新页面,原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
使用vuejs实现简单的图书增加删除功能
概要: 1.实现删除功能. 2.实现增加功能. 代码: css table,td{border: 1px solid #ccc;border-collapse: collapse;}table,fie ...
JS+jQuery简单版发布、删除留言
首先用户在输入框中输入内容,按下发布按钮,内容到下面的li中,并且清空输入框中的内容下面这个li元素就是后面创建的 <!DOCTYPE html> <html lang=" ...
模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）...
我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么作为初学者,要模仿这些功能有点复杂的,最起码表的关系得弄清楚~~ 先把思路理一下: (1)用户登录,用session读取 ...
php 朋友圈留言,php实例-PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）...
我们大部分人都发过动态,想必都知道发动态.回复评论.删除动态的整个过程,那么这个功能是如何实现的呢?下面小编给大家带来了实例代码,对PHP仿qq空间或朋友圈发布动态.评论动态.回复评论.删除动态或评论 ...
利用Vue.js实现简单员工管理系统（增删查）的功能
员工管理系统注意!!此篇博客没有涉及后台数据库,所有数据自己设定,不经过数据库来增删改查!! 我们想要实现一个简单的员工管理系统案例需要以下几个步骤,我们一起来康康叭~~ 第一步:首先先实现基础的表 ...
模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（中）...
在上一篇随笔中已经将如何发布动态呈现了,那么现在来看一下剩下的评论动态.回复评论.删除动态和评论功能,这几个功能会有点绕~~~ 一.思路如下: (1)你发表动态之后,会有人评论这一条动态,当评论之后, ...