实现发布效果
style部分
<style>
*{margin:0; padding:0;}
li{list-style: none;}
.wrap{
width: 560px;
padding: 30px;
background: #dfdfdf;
margin: 100px auto;
}
.wrap p{
margin-bottom: 20px;
}
.wrap p label{
margin-right: 10px;
vertical-align: top;
}
.wrap p input{
width: 480px;
height: 40px;
padding-left: 20px;
}
.wrap p textarea{
width: 480px;
height: 240px;
padding-left: 20px;
resize: none;
}
.wrap p.num{
text-align: right;
}
.wrap p.btn_wrap{
text-align: right;
}
.btn{
padding: 4px 10px;
font-size: 20px;
}
.list{
margin-top: 10px;
}
.list li h4{
height: 40px;
line-height: 40px;
padding-left: 20px;
background: #ccc;
}
.list li p{
line-height: 30px;
padding-left: 20px;
margin: 10px 0;
}
.list li h4 .close{
float: right;
padding: 0 10px;
background: red;
}
</style>
body部分
<div class="wrap">
<p>
<label for="title">标题:</label>
<input type="text" id="title">
</p>
<p>
<label for="content">内容:</label>
<textarea name="" id="content" cols="30" rows="10"></textarea>
</p>
<p class="num">
还可以输入 <span class="number" id="num">200</span>个字
</p>
<p class="btn_wrap">
<button class="btn" id="btn">发布</button>
</p>
<h3>发布内容</h3>
<ul class="list" id="list">
<!-- <li>
<h4>标题 <span class="close">X</span></h4>
<p>最新发布的内容</p>
</li> -->
</ul>
</div>
js部分
<script>
var btn=document.querySelector('#btn');
var title=document.querySelector('#title');
var content=document.querySelector('#content');
var list=document.querySelector('#list');
btn.onclick=function(){
console.log(title.value);
console.log(content.value);
// 创建li 并写入内容
var newLi=document.createElement('li');
newLi.innerHTML=`
<h4>${title.value} <span class="close">X</span></h4>
<p>${content.value}</p>
`;
// 获取所有的li 并且判断所有li的长度,如果长度大于0,则往后插,否则往前插入
var lis=list.children;
console.log(lis);
if(lis.length==0){
list.appendChild(newLi);
}else{
list.insertBefore(newLi,lis[0]);
}
// 插入完,将输入框的内容重置
title.value="";
content.value="";
// 点击删除
var close=document.querySelectorAll('#list li h4 span');
for(var i=0;i<close.length;i++){
close[i].onclick=function(){
var parent=this.parentNode.parentNode.parentNode; // list
var child=this.parentNode.parentNode; // li
parent.removeChild(child);
}
}
}
var num=document.querySelector('#num');
content.onkeyup=function(){
console.log(12313);
var len=content.value.length;
if(len>200){
content.value=content.value.substr(0,200);
}else{
num.innerHTML=200-len;
}
}
</script>
希望可以帮到大家