相信大家都知道QQ留言板吧，相信大家也给别人留过言，那你知道怎么用JS敲出留言板吗？ 下面我给大家演示一下。

html样式

Document

留言

scss样式

*{

padding: 0;

margin: 0;

list-style: none;

}

div{

width: 300px;

height: 400px;

border: solid 1px red;

margin-left: 50px;

overflow: scroll;

&>p{

height: 30px;

line-height: 30px;

border-bottom: dashed 1px green;

&>button{

float: right;

height: 30px;

}

&>span{

font-size: 10px;

color: purple;

}

}

}

textarea{

margin-left: 50px;

margin-top: 30px;

width: 300px;

}

.active{

display: none;

}

js样式

//首先获取元素节点

var div = document.querySelector('div')

var text = document.querySelector('textarea')

var but = document.querySelector('button')

but.onclick = function () {

var aa = text.value.trim();

if (aa.length == 0 && aa == '') {//判断如果文字区域如果为空的话，不能发布

return;

}

var time = new Date(); //获取最新的日期

var ss = `${time.getHours()}${time.getMinutes()}${time.getSeconds()}`;//把他拼接起来

div.innerHTML += `

${aa}${ss}删除

`; //用标签把他写入页面

text.value = '';

}

window.onkeydown = function (e) { //用键enter进行发布，首先获取enter键的位置，然后给enter点击事件

var e = window.event || e.event;

var aa = text.value.trim();

if (aa.length == 0 && aa == '') {

return;

}

if (e.keyCode == 13) {

var aa = text.value;

var time = new Date();

var ss = `${time.getHours()}${time.getMinutes()}${time.getSeconds()}`;

div.innerHTML += `

${aa}${ss}删除

`;

text.value = '';

}

}

div.onclick = function (e) { //首先确定删除键的位置，然后把它删除

var e = window.event || e.event;

if (e.target.nodeName == 'BUTTON') {

e.target.parentNode.classList.add('active')

}

}

现在让我们来看下效果吧

image.png

是不是很有趣呢，一起来试试吧。