js模拟微博发布消息
程序员文章站
2023-11-27 22:35:46
话不多说,请看代码:
话不多说,请看代码:
<!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!