js模拟微博发布消息

时间：2021-05-26

话不多说，请看代码：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="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: 100px auto; border: 1px solid #ccc; padding: 20px; } .box span{ 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: 1px solid #ddd; padding: 3px 8px; } ul{ margin: 20px auto; margin-left: 70px; width: 450px; list-style:none ; } li{ border-bottom: 1px dashed #ddd; line-height: 34px; margin: 5px 0; overflow: hidden; } ul li .date{ float: right; margin-right: 10px; font-size: 12px; } ul li a{ float: right; } button{ padding: 6px 12px; } </style> <body> <div class="box"id="box"> <span>微博发布</span> <!--<input type="" name="" id="" value="" />--> <div contenteditable="true" class="text-box form-control"id="text-box"></div> <button>发布</button> <!--<ul> <li> 123123 <a href="javascript:" rel="external nofollow" rel="external nofollow" >删除</a> <span class="date">2017/2/22</span> </li> </ul>--> </div> </body></html><script type="text/javascript"> window.onload=function(){ var box=document.getElementById("box") var txt=document.getElementById("text-box"); var btn=document.getElementsByTagName("button")[0]; var ul=document.createElement("ul"); box.appendChild(ul); btn.onclick=function(){ if (txt.innerHTML=='') { alert('不能为空'); return false; } var myDate = new Date(); var time=myDate.toLocaleString(); var li=document.createElement("li"); ul.appendChild(li);li.innerHTML=txt.innerHTML+'<a href="javascript:" rel="external nofollow" rel="external nofollow" >删除</a><span class="date">'+time+'</span>'; txt.innerHTML=''; var lis=ul.children; if (lis==0) { ul.appendChild(li); } else{ ul.insertBefore(li,lis[0]) }// 删除功能 var dele=document.getElementsByTagName("a"); for (var k = 0; k < dele.length; k++) { dele[k].onclick=function(){ ul.removeChild(this.parentNode); } } } }</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章