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

最新推荐文章于 2023-08-06 11:56:51 发布

柒月VII

最新推荐文章于 2023-08-06 11:56:51 发布

阅读量2.5k

点赞数 6

分类专栏：前端学习文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_43205774/article/details/126457178

版权

前端学习专栏收录该内容

13 篇文章 5 订阅

订阅专栏

一、实现样式

comment

二、使用知识点

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 ~ 11
        var 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前面加0
    function 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 ~ 11
        var 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;
    }
}