现在很多类似以微博发布动态的效果，下面为一个用 JavaScript写的小小的类似微博发布信息的案例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta ch ...
现在很多类似以微博发布动态的效果，下面为一个用 JavaScript写的小小的类似微博发布信息的案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>微博发布</title> 6 <style type="text/css"> 7 8 *{ 9 padding: 0;10 margin: 0;11 }12 ul {13 14 list-style: none;15 }16 17 .box {18 width: 600px;19 height: auto;20 border: 1px solid #ccc;21 margin: 100px auto;22 text-align: center;23 padding: 30px 0;24 background-color: rosybrown;25 }26 27 .box textarea {28 width: 450px;29 resize: none; /*设置文本不能过拖动*/30 }31 .box li {32 33 width: 450px;34 line-height: 30px;35 border-bottom: 1px dashed #ccc;36 margin-left: 80px;37 text-align: left;38 }39 40 .box li a {41 42 float: right;43 }44 </style>45 46 <script type="text/javascript">47 48 window.onload = function (){49 //获取数组的第一个50 var btn = document.getElementsByTagName("button")[0];51 var txt = document.getElementsByTagName("textarea")[0];52 var ul = document.createElement("ul"); 53 btn.parentNode.appendChild(ul); //添加子节点54 btn.onclick = function (){55 56 //1.需要判断文本中是否有内容57 if(txt.value == ""){58 59 alert("亲!内容不能为空哦!!");60 61 return false; //让操作就在这个地方终止62 }63 64 var newli = document.createElement("li"); //创建一个新的li标签65 newli.innerHTML = txt.value +"<a href='javascript:;'>删除</a>"; //给新的标签添加内容，并拼接删除已连接66 ul.appendChild(newli);67 68 //清空输入框69 txt.value = "";70 71 var aa = document.getElementsByTagName("a");//获取所有的a标签72 73 for(var i = 0;i<aa.length;i++){ // 遍历点击删除74 75 aa[i].onclick = function () {76 77 this.parentNode.remove();78 }79 }80 81 82 }83 84 }85 86 </script>87 </head>88 <body>89 <div >90 91 微博发布:<textarea name="" id="" cols="30" rows="10"></textarea>92 <button>发布</button>93 94 </div>95 </body>96 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：javascript 信息的发布与删除
关键词：JavaScript
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
