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

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

@彼岸花

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

阅读量723

点赞数

分类专栏： JAVA开发文章标签： javascript js html css

本文链接：https://blog.csdn.net/weixin_44825185/article/details/115232254

版权

JAVA开发专栏收录该内容

34 篇文章 0 订阅

订阅专栏

代码

<!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>

结果

在这里插入图片描述

@彼岸花

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例（十）：留言评论功能

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>评论</title> <style> *{ padding: 0; margin: 0; } #out{ width: 512px;
复制链接

扫一扫