留言板学习

留言板

• css部分

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .messCont{
            width: 300px;
            min-height: 300px;
            background-color: bisque;
            margin: 10vh auto;
            border-radius: 10px;
            padding: 10px;
        }
        .title,.inputCont{
            text-align: center;
            line-height: 3vh;
        }
        .list{
            margin-top: 2vh;
        }
        .set{
            margin: 10px 0 10px 20px;
        }

• html部分

    <div class="messCont">
        <div class="title">留言板</div>
        <div class="inputCont">
            <input type="text" onkeydown="addMsg(this)" placeholder="请输入内容" autofocus />
        </div>
        <ul class="list"></ul>
    </div>

• js部分

        function addMsg(ele) {
            // console.log(event);
            // console.log(event.key);
            if (event.key === 'Enter') {
                // 1. 获取显示留言的容器
                const ul = document.querySelector('.list');
                // 2. 判断用户留言是否为空
                if (ele.value.trim().length === 0) {
                    alert('留言不能为空');
                    ele.focus();
                    return false;
                }
                // 3. 添加一条新留言
                const li = document.createElement('li');
                // console.log(ele.value);
                // li.textContent = ele.value;
                li.innerHTML = '<div>' + '留言：'+ ele.value + '<button onclick="del(this.parentNode)">删除</button>'+'</div>';
                li.className = 'item';
                // if (ul.firstElementChild !== null) {
                //     ul.firstElementChild.before(li);
                // } else {
                //     ul.append(li);
                // }
                ul.insertAdjacentElement('afterBegin', li);
                // 4. 将输入框中的前一条留言清空
                ele.value = null;
                // 5. 焦点重置
                ele.focus();
                // 回复
                setTimeout(function(){
                    const replay = document.createElement('div');
                    replay.className = 'set';
                    replay.textContent = '感谢留言！';
                    let lastEle = document.querySelector('.list>.item:first-of-type>div');
                    lastEle.insertAdjacentElement('afterEnd', replay);
                },1500);
            }
        }
        // 删除
        function del(ele) {
            return confirm('是否删除?') ? ele.remove() : false;
        }

• 效果