JS实现简单留言版

<body>
<div class="wrapper">
    <div class="content">
        <ul>
            <!-- <li>
                <span> 2019-09-11 20:00:00</span>
                <strong>留言</strong>
                <button>删除</button>
            </li> -->
        </ul>
    </div>
    <textarea name="" id="text" cols="30" rows="10"></textarea>
    <button id="go">发表</button>
</div>
</body>
<script>
var go = document.getElementById('go')
var text = document.getElementById('text')
var ul = document.querySelector('.content ul')
go.addEventListener('click', function () {
    var html = text.value.trim();
    if (html.length > 0) {
        var time = new Date
        var str = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
        var li = document.createElement('li')
        li.innerHTML = ` <span>${str}</span>
                <strong>${html}</strong>
                <button>删除</button>`
        ul.appendChild(li)
    }
    text.value = ''
})
ul.onclick = function (e) {
    var e = e.event || window.event
    if (e.target.nodeName == 'BUTTON') {
        ul.removeChild(e.target.parentNode)
    }
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容