发布留言发布、删除，点击发布下面会出现留言，点击删除，下面留言将被删除，发布以后右下角自带删除按钮

点击发布以后内容里面有自己发布的内容，和当前发布时间、删除

现在给大家看看渲染页面css片段有哪些：

        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        i {
            font-style: normal;
        }
        
        #container {
            width: 480px;
            margin: 200px auto;
        }
        
        .box {
            display: flex;
            justify-content: center;
            align-items: inherit;
        }
        
        textarea {
            width: 360px;
            height: 50px;
            resize: none;
            outline: none;
            line-height: 50px;
            padding-left: 10px;
        }
        
        .box button {
            width: 50px;
            margin-left: 2px;
        }
        
        .show {
            width: 480px;
            margin-top: 20px;
        }
        
        .show li {
            padding: 15px;
            box-shadow: 3px 2px 4px 1px #ccc;
            border: 1px solid #ccc;
        }
        
        .show li span {
            margin: 10px 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        
        .show li span i {
            margin-right: 10px;
            font-size: 12px;
            color: #999;
        }
        
        .show li button {
            border: none;
            color: #f00;
            font-size: 12px;
            background-color: #fff;
        }
        
        .show li:hover {
            border: 1px solid #ccc;
            box-shadow: 3px 2px 6px 3px #ccc;
            transition: all 0.3s;
        }

接下来是样式html：

    <div id="container">
        <div class="box">
            <textarea name="" id="text" cols="30" rows="10"></textarea>
            <button>发布</button>
            <button class="btns">删除</button>
        </div>
        <ul class="show">
            <li>
                <p>这是一段留言</p>
                <span>
                    <i>2023年05月24号 09:30:00</i>
                    <button>删除</button>
                </span>
            </li>
        </ul>
    </div>

最后写js代码：

    <script>
        // 留言发布,里面包含了发布的内容,日期,还有删除功能
        // 获取页面元素
        let con = document.querySelector('#container')
        let boxBtn = con.querySelector('.box button');
        let text = con.querySelector('#text');
        let show = con.querySelector('.show');

        boxBtn.onclick = function() {
            let val = text.value;
            if (val.trim()) {
                // 创建li标签
                let li = document.createElement("li");
                let p = document.createElement("p");
                let span = document.createElement("span");
                let btn = document.createElement("button");
                let i = document.createElement("i");

                btn.innerText = '删除';
                btn.onclick = function() {
                    this.parentNode.parentNode.remove();
                }

                p.innerText = val;
                i.innerText = getDate();

                span.appendChild(i);
                span.appendChild(btn);
                li.appendChild(p);
                li.appendChild(span);
                show.appendChild(li);
                text.value = '';
            };
        }

        // 获取当前日期显示当前发布时间
        function getDate() {
            let date = new Date();
            // 年
            let year = date.getFullYear();
            // 月
            let month = date.getMonth() + 1;
            month = addZero(month);
            // 日
            let day = date.getDate();
            day = addZero(day);
            // 小时
            let hours = date.getHours();
            hours = addZero(hours);
            // 分钟
            let minutes = date.getMinutes();
            minutes = addZero(minutes);
            // 秒数
            let seconds = date.getSeconds();
            seconds = addZero(seconds);
            return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
        }

        // 为月日还有时间补零
        function addZero(val) {
            return val < 10 ? '0' + val : val
        }

        // 点击删除事件
        let btns = document.querySelector('.btns');
        let ul = document.querySelector('ul');
        btns.onclick = function() {
            ul.removeChild(ul.children[0]);
            if (!ul.children.length == 0) {
                this.disabled = false;
            } else {}
        }
    </script>

写完就可以看看是什么样的效果，自行查看