能实现简单的上传和删除,以及显示发布的时间。
主要是先创建个文本节点,然后将所要发布的信息追加在文本节点上。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box-frits{
width:800px;
margin: 0 auto;
}
.box {
margin: 0 auto;
width: 800px;
height: 400px;
resize: none; /*进制文本域伸缩*/
}
#btn{
border: 0;
width: 100px;
height: 50px;
background: #F08080;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 10px;
margin-top: 20px;
font-size: 16px;
float:right ;
}
.box1{
float: left;
line-height: 34px;
width: 100%;
height: 20px;
}
.box1 span{
margin-left:10px;
margin-right:10px;
}
.box1 label:hover{
color: red;
}
.box1 p{
border-bottom: 1px solid #dbdbdb;
}
</style>
</head>
<!--<span id="label"></span>
<span id="span"></span>-->
<body>
<div class="box-frits">
<textarea class="box"></textarea>
<input type="button" name="" id="btn" value="上传" />
<div class="box1"></div>
</div>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function() {
var d=new Date();
var a=d.getMonth()+1;
var b=d.getFullYear()+"/"+a+"/"+d.getDate();
console.log(b);
// 获取节点信息
var box = document.getElementsByClassName("box")[0].value;
var box1 = document.getElementsByClassName("box1")[0];
// 创建节点
var t = document.createElement("p");
// 创建一个文本节点:
var con = document.createTextNode(box);
var span = document.createElement("span");
var label = document.createElement("label");
span.innerText =b;
label.innerText ="删除";
// 追加
t.appendChild(con);
t.appendChild(span);
t.appendChild(label);
// console.log(con);
if(con.length == 0) {
alert("输入框不能为空,请 重新输入");
} else {
box1.appendChild(t);
}
// t.innerHTML=box ;
label.onclick = function() {
var r = confirm("是否删除");
if(r == true) {
this.parentNode.parentNode.removeChild(this.parentNode);
alert("删除成功");
} else {
alert("删除失败");
}
}
}
</script>
</body>
</html>
运行结果