<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 500px;
/*height: 400px;*/
border: 3px solid black;
/*position: relative;*/
top: 0;
left: 0;
padding: 50px;
margin: 0 auto;
}
.textBox{
width: 500px;
height: 250px;
border: 1px solid #CBA4C3;
margin: 0 auto;
}
.send{
width: 50px;
height: 30px;
background: orange;
}
</style>
</head>
<body>
<div class="wrap">
<textarea class="textBox" ="" id="" cols="30" rows="10"></textarea>
<input type="button" value="发表" class="send">
</div>
</body>
<script>
//获取元素
var wrap = document.querySelector(".wrap");
var textBox = document.querySelector(".textBox");
var btn = document.querySelector("input");
// 点击按钮发送
btn.onclick = function(){
// 首先判断在文本框中是否有输入值
if (textBox.value != "") {
// 获取文本框的文本
// 并且在wrap中添加一个div，内有文本框的文本
// 创建div
var message = document.createElement("div");
// 创建删除按钮
var x = document.createElement("div");
// 在删除按钮右上角写上X
x.innerHTML = "X";
// 将删除按钮定位在message右上角
message.style.width = "500px";
message.style.background = "#D9AEC7";
message.style.position = "relative";
message.style.bottom = "0px";
message.style.marginTop = "10px";
message.style.overflow = "hidden";
x.style.position = "absolute";
x.style.right = "0px";
x.style.top = "0px";
x.style.cursor = "pointer";
console.log(message);
console.log(x);
// 将信息盒写入wrap中
wrap.appendChild(message);
// 将文本框的值写入信息盒中
message.innerHTML = textBox.value;
// 点击x号
message.appendChild(x);
x.onclick = function(){
// 获取信息盒高度
var height = message.offsetHeight;
console.log(height);
// 计时器不断减少高度
var timer = setInterval(function(){
height -= 1;
if (height == 0 ) {
message.style.display = "none";
clearInterval(timer);
}
message.style.height = height + "px";
},10);
}
}else{
alert("输入信息不可为空");
}
}
</script>
</html>