用js写留言板

• 这是css

<style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100%;
            height: 100%;
            background: rgb(65, 65, 63);
        }

        .bacground {
            width: 700px;
            height: 100%;
            background: white;
            margin: auto;
            margin-top: 20px;
        }

        .head,
        .pop-head {
            height: 50px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        .name {
            width: 640px;
            height: 40px;
            font-size: 20px;
            margin: 10px 28px;
            line-height: 50px;
            border-radius: 8px;
            border: 2px solid rgb(139, 137, 137);
            outline: none;
        }

        .content,
        .pop-reply {
            width: 640px;
            height: 150px;
            font-size: 22px;
            margin: 10px 28px;
            border: 2px solid rgb(139, 137, 137);
            outline: none;
            border-radius: 8px;
            resize: none;
        }

        .btn,
        .pop-btn {
            float: right;
            height: 30px;
            margin-right: 28px;
            border-radius: 6px;
            outline: none;
            font-size: 20px;
            padding: 0 20px;
            background: rgb(169, 238, 255);
        }

        h3 {
            font-size: 20px;
            color: rgb(102, 102, 102);
            background: rgb(205, 221, 248);
            margin-top: 50px;
            line-height: 50px;
            text-indent: 30px;
            font-weight: 545;
        }

        li {
            list-style: none;
            width: 640px;
            font-size: 22px;
            margin: 15px 30px;
        }

        .message-head {
            display: flex;
        }

        .message-head .photo {
            width: 70px;
            height: 70px;
            background: rgb(6, 109, 134);
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            line-height: 70px;
            overflow: hidden;
        }

        .message-head .time {
            margin-left: 12px;
        }

        .liuyan,
        .reply p {
            width: 560px;
            /* height: 76px; */
            line-height: 50px;
            display: block;
            background: rgb(205, 221, 248);
            font-size: 20px;
            margin-left: 80px;
            border-radius: 8px;
            text-indent: 15px;
        }

        .delete {
            width: 60px;
            height: 30px;
            display: block;
            line-height: 30px;
            margin-left: 580px;
            /* margin-bottom: 0px; */
            border-radius: 6px;
            outline: none;
            font-size: 15px;
            background: rgb(169, 238, 255);
        }

        .answer {
            width: 60px;
            height: 30px;
            display: block;
            line-height: 30px;
            margin-top: -29px;
            margin-left: 515px;
            border-radius: 6px;
            outline: none;
            font-size: 15px;
            background: rgb(169, 238, 255);
        }

        .popup {
            width: 100vw;
            height: 100vh;
            position: fixed;
            background: rgba(0, 0, 0, .3);
            left: 0;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
        }

        .pop-content {
            width: 700px;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            padding-bottom: 20px;
        }

        .reply p {
            margin-top: 10px;
            background: rgba(100, 100, 100, .1);
        }
    </style>

• 这是HTML

<div class="bacground">
        <div class="head">留言板</div>
        <input class="name" type="text" placeholder="请输入您的昵称">
        <textarea class="content" placeholder="请保持言论文明......"></textarea>
        <button class="btn">留言</button>
        <h3>大家在说</h3>
        <ul class="text">
            <!-- <li>
        <div class="message-head">
          <span class="photo">系统</span>
          <p class="time">2019-9-27 0:47:38</p>
        </div>
        <p class="liuyan">测试留言</p>
        <div class="reply">
          <p>测试回复</p>
        </div>
        <button class="delete">Delete</button>
        <button class="answer">Answer</button>
      </li> -->
        </ul>
    </div>
    <div class="popup">
        <div class="pop-content">
            <div class="pop-head">回复板</div>
            <textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
            <button class="pop-btn">回复</button>
        </div>
    </div>

• 这是js

 <script>
        //获取按钮的值
        var oBtn = document.querySelector('.btn');
        //点击按钮
        oBtn.onclick = function () {
            //获取name和content的值
            var oName = document.querySelector('.name').value;
            var oContent = document.querySelector('.content').value;

            if (createMsg(oName, oContent)) {
                startTimer()
            }


        }


        //十秒后留言
        function startTimer() {
            // 此按钮不可点击
            oBtn.disabled = true;
            count = 10;
            oBtn.innerHTML = count + '秒后可留言';
            //每两百毫秒减一
            var t = setInterval(function () {
                count--;
                oBtn.innerHTML = count + '秒后可留言';
                if (count < 0) {
                    //清除定时器
                    clearInterval(t)
                    //此按钮可以点击
                    oBtn.disabled = false;
                    oBtn.innerHTML = '留言'
                }
            }, 200)
        }

        function createMsg(oName, oContent) {
            //判断非空
            if (!oName || !oContent) {
                alert('输入不能为空')
                //返回错误，就不执行上面的十秒后留言
                return false
            }

            //把文本添加到标签中
            //创建li标签
            var oLi = document.createElement('li');
            //ul
            var oText = document.querySelector('.text');
            oLi.innerHTML =
                `
               <div class="message-head">
               <span class="photo">${oName}</span>
               <p class="time">${formatDate(new Date())}</p>
               </div>
               <p class="liuyan">${oContent}</p>
               <div class="reply">
            
               </div>
               <button class="delete">Delete</button>
               <button class="answer">Answer</button>
            `
            //文本添加到标签
            oText.appendChild(oLi)
            oText.insertBefore(oLi, oText.children[0]);



            //删除留言
            // 拿到所有删除的值
            var dele = document.querySelectorAll('.delete');
            // 遍历所有的删除
            for (var i = 0; i < dele.length; i++) {
                //当点击删除按钮时
                dele[i].onclick = function () {
                    // 删除button的父元素，也就是整个li
                    this.parentNode.remove()
                }
            }


            // 回复留言
            var oAnswer = document.querySelectorAll('.answer');
            var oPopup = document.querySelector('.popup');
            //遍历所有answer的值
            for (var i = 0; i < oAnswer.length; i++) {
                oAnswer[i].onclick = function () {
                    //找到他的兄弟的兄弟
                    var oReply = this.previousElementSibling.previousElementSibling;
                    // 点击answer按钮的时候显示  弹窗
                    oPopup.style.display = 'flex';

                    //点击回复  
                    //得到按钮
                    var btnp = document.querySelector('.pop-btn');
                    btnp.onclick = function () {

                        // 得到我们输入是回复的值
                        var pupse = document.querySelector('.pop-reply').value;
                        // 如果输入为空
                        if (!pupse) {
                            alert('回复不能为空');
                            // 关闭显示
                            oPopup.style.display = 'none';
                            return
                        }

                        //当输入有值的时候
                        // 创建一个新的标签
                        var op = document.createElement('p');
                        // 标签在页面上显示的值 等于我们输入的值
                        op.innerHTML = pupse;
                        // 将标签上的文本值 添加到兄弟属性中
                        oReply.appendChild(op);
                        oPopup.style.display = 'none';
                    }
                }
            }
            return true
        }
        //格式化日期
        function formatDate(date) {
            var date = new Date;
            var y = date.getFullYear();
            var m = date.getMonth();
            m = m >= 10 ? m : '0' + m;
            var d = date.getDate();
            d = d >= 10 ? d : '0' + d;
            var h = date.getHours();
            h = h >= 10 ? h : '0' + h;
            var min = date.getMinutes();
            min = min >= 10 ? min : '0' + min;
            var s = date.getSeconds();
            s = s >= 10 ? s : '0' + s;
            return y + '年' + m + '月' + d + '日' + ' ' + h + ':' + min + ':' + s
        }
    </script>