留言框的生成

1.HTML的布局

 <div id="container">
        <div class="writeMsg">
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <button>发表 <br> 评论</button>
        </div>
        <div class="showMsg">
            <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos labore nostrum officia placeat quasi reiciendis, tempora. Autem debitis doloribus incidunt nobis quaerat, quam rem repellendus veniam vitae. Cumque earum, repellendus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos labore nostrum officia placeat quasi reiciendis, tempora. Autem debitis doloribus incidunt nobis quaerat, quam rem repellendus veniam vitae. Cumque earum, repellendus.</p> -->
        </div>
    </div>

2.CSS改写样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #container {
            max-width: 998px;
            min-width: 375px;
            margin: 10px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .writeMsg {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .writeMsg textarea {
            width: 80%;
            border-radius: 5px;
            height: 64px;
            resize: none;
            border: 1px solid #e5e9ef;
            background: #f4f5f7;
        }
        
        .writeMsg button {
            width: 70px;
            height: 64px;
            border-radius: 5px;
            margin-left: 10px;
            border: none;
            background: #00a1d6;
            border: 1px solid #00a1d6;
            color: #fff;
            cursor: pointer;
        }
        
        .showMsg {
            width: 90%;
            margin-top: 20px;
        }
        
        .showMsg p {
            width: 96%;
            border-radius: 10px;
            background: #f2f2f2;
            margin: 5px auto;
            padding: 3px 8px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            position: relative;
        }
        
        .showMsg p span {
            color: pink;
        }
        
        .showMsg p button {
            right: 183px;
            position: absolute;
        }
    </style>

3.JS的生成

 <script>
        //获取元素
        var textarea = document.querySelector(".writeMsg textarea")
        var button = document.querySelector(".writeMsg button")
        var showMsg = document.querySelector(".showMsg")
        var p = document.querySelectorAll(".showMsg p")
        textarea.onmouseenter = function() {
            this.style.borderColor = "skyblue"
        }
        textarea.onmouseleave = function() {
            this.style.borderColor = "#e5e9ef"
        }
        button.onmouseenter = function() {
            textarea.style.borderColor = "skyblue"
            this.style.opacity = "0.8"
        }
        button.onmouseleave = function() {
            textarea.style.borderColor = "#e5e9ef"
            this.style.opacity = "1"
        }
        button.onclick = function() {
            var msg = textarea.value;
            if (msg.trim() == '') {

            } else {
                var time = getTime()
                var p = document.createElement("p")
                var span = document.createElement("span")
                span.innerHTML = time
                showMsg.insertBefore(p, showMsg.children[0])
                p.innerHTML = msg + '<button>删除<button>'
                p.appendChild(span)
                textarea.value = ""
                var btn1 = document.querySelector("p button")
                btn1.onclick = function() {
                    this.parentNode.parentNode.removeChild(this.parentNode)
                }
            }
        }

        //给时间封装一个函数
        function getTime() {
            var date = new Date()
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m < 10 ? m = '0' + m : m
            var d = date.getDate()
            d < 10 ? d = '0' + d : d
            var h = date.getHours()
            h < 10 ? h = '0' + h : h
            var min = date.getMinutes()
            min < 10 ? min = '0' + min : min
            var s = date.getSeconds()
            s < 10 ? s = '0' + s : s
            return y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s
        }
    </script>

4.最后的合成