js模拟微博发布消息
话不多说，请看代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>js模拟微博发布消息</title>
</head>
<style>
*{
padding:0;
margin:0;
}
.box{
width:600px;
height:auto;
margin:100pxauto;
border:1pxsolid#ccc;
padding:20px;
}
.boxspan{
line-height:36px;
}
input{
width:450px;
padding:10px;
}
.text-box{
display:inline-block;
width:450px;
text-align:left;
min-height:30px;
line-height:26px;
border:1pxsolid#ddd;
padding:3px8px;
}
ul{
margin:20pxauto;
margin-left:70px;
width:450px;
list-style:none;
}
li{
border-bottom:1pxdashed#ddd;
line-height:34px;
margin:5px0;
overflow:hidden;
}
ulli.date{
float:right;
margin-right:10px;
font-size:12px;
}
ullia{
float:right;
}
button{
padding:6px12px;
}
</style>
<body>
<divclass="box"id="box">
<span>微博发布</span>
<!--<inputtype=""name=""id=""value=""/>-->
<divcontenteditable="true"class="text-boxform-control"id="text-box"></div>
<button>发布</button>
<!--<ul>
<li>
123123
<ahref="javascript:"rel="externalnofollow"rel="externalnofollow">删除</a>
<spanclass="date">2017/2/22</span>
</li>
</ul>-->
</div>
</body>
</html>
<scripttype="text/javascript">
window.onload=function(){
varbox=document.getElementById("box")
vartxt=document.getElementById("text-box");
varbtn=document.getElementsByTagName("button")[0];
varul=document.createElement("ul");
box.appendChild(ul);
btn.onclick=function(){
if(txt.innerHTML==''){
alert('不能为空');
returnfalse;
}
varmyDate=newDate();
vartime=myDate.toLocaleString();
varli=document.createElement("li");
ul.appendChild(li);
li.innerHTML=txt.innerHTML+'<ahref="javascript:"rel="externalnofollow"rel="externalnofollow">删除</a><spanclass="date">'+time+'</span>';
txt.innerHTML='';
varlis=ul.children;
if(lis==0){
ul.appendChild(li);
}else{
ul.insertBefore(li,lis[0])
}
//删除功能
vardele=document.getElementsByTagName("a");
for(vark=0;k<dele.length;k++){
dele[k].onclick=function(){
ul.removeChild(this.parentNode);
}
}
}
}
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！