js留言板（详细版）

首先我们创建div来做留言板，再来个文本域和按钮

    <div></div>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>留言</button>

然后我们简单排个版

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

div {
    width: 300px;
    height: 300px;
    margin-left: 100px;
    border: solid 1px #d9e;
    overflow: scroll;

    p {
        border-bottom: dashed 1px #999;
        font-size: 15px;
        height: 25px;
        line-height: 25px;

        span {
            margin-left: 30px;
            font-size: 10px;
            color: #555;
        }

        button {
            height: 25px;
            float: right;
        }
    }



}

textarea {
    width: 300px;
    height: 100px;
    margin-left: 100px;
    margin-top: 30px;

}

button {
    width: 50px;
    height: 30px;

}

.active {
    display: none;
}

接下来我们就开始写js啦，请看注释

<script>
var btn = document.querySelector('button');//获取留言按钮
var text = document.querySelector('textarea');//获取文本域
var div = document.querySelector('div');//获取div盒子
btn.onclick = function(){创建事件
    getHtml();
}
window.onkeydown = function(e){//键盘事件
    var e = window.event || e.event;//兼容
    if(e.keyCode == 13){//判断按的是回车键时
        getHtml();
    }
}

function getHtml(){//封装函数
    var time = new Date();//现在时间
    var textVelue = text.value.trim();//获取留言内容并去留言的前后空格
    if(textVelue.length == 0 && textVelue == ''){////留言没有内容就停止执行
        return;
    }
    var str = `${time.getFullYear()}.${time.getMonth()-1}.${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
    div.innerHTML += `<p>${textVelue}<span>${str}</span><button>删除</button></p>`;//留言内容写入留言板
    text.value = ''//留言内容写入留言板后，文本域为空
}
div.onclick = function(e){//事件委托
    var e = window.event || e.event;//兼容
    if(e.target.nodeName == 'BUTTON'){//判断是否点击删除按钮
        e.target.parentNode.classList.add('active')//删除这个按钮父元素的内容
    }
}