js实现留言板
2019-10-20 本文已影响0人
阿油_爱周周
相信大家都知道QQ留言板吧，相信大家也给别人留过言，那你知道怎么用JS敲出留言板吗？ 下面我给大家演示一下。
html样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./留言板.css">
</head>
<body>
<div></div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>留言</button>
</body>
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样式
<script>
//首先获取元素节点
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 += `<p>${aa}<span>${ss}</span><button>删除</button></p >`; //用标签把他写入页面
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 += `<p>${aa}<span>${ss}</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')
}
}
</script>
现在让我们来看下效果吧
image.png
是不是很有趣呢，一起来试试吧。
