JavaScript案例（十）：留言评论功能

最新推荐文章于 2023-04-03 21:40:05 发布

原创最新推荐文章于 2023-04-03 21:40:05 发布 · 798 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #html #css

JAVA开发专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现一个简单的前端评论系统，用户可以输入评论并发布，同时具备删除功能。代码展示了如何获取输入内容、验证非空、创建DOM元素以及处理删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #out{
            width: 512px;
            height:320px;
            /*background: url("./image/raccoon_01.jpg") no-repeat 5px;*/
            background-image: url("./image/raccoon_01.jpg") ;
            background-repeat: no-repeat;
            background-size: 512px 320px;
            margin: 50px auto;
            /*padding-top: 40px;*/
            overflow: hidden;
        }
        #in{
            /*text-align: center;*/
            margin-left: 76px;
            margin-top: 30px;
        }
        hr{
            outline: none;
            width:400px;
            margin: 10px auto;
        }

        .out-ul-li{
            list-style: none;
            margin: 0 auto;
            overflow: hidden;
            width: 480px;
            border: 1px dashed #858585;
        }
        .out-ul-li a{
            float: right;
        }
    </style>
</head>
<body>
<div id="out">
    <div id="in">
        <textarea name="" id="input" cols="50" rows="10"></textarea>
        <button id="btn">发布</button>
    </div>
    <hr >
    <ul id="out-ul">

    </ul>
</div>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
        //    获取textarea的输入内容
            var input = document.getElementById("input");
            var text = input.value;
        //    判断是否为空
            if(text.length === 0){
                alert("评论内容不能为空！");
                return;
            }
        //    创建li标签
            var newli = document.createElement("li");
            //修改li标签的内容为textarea的内容
            newli.innerHTML = text+'<a href="javascript:void (0)">删除</a>';
            newli.className = 'out-ul-li';
            var ul_li = document.getElementById("out-ul");
            ul_li.appendChild(newli);
        //  清空输入框的内容
            input.value = '';
        //    删除评论
            var delbtn = document.getElementsByTagName("a");
            for (var i = 0; i < delbtn.length; i++) {
                delbtn[i].onclick = function () {
                    this.parentNode.remove();
                }
            }
        }
    }
</script>
</body>
</html>

结果

在这里插入图片描述