你的位置:首页 > Java教程

[Java教程]javascript 信息的发布与删除


现在很多类似以微博发布动态的效果,下面为一个用 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>


 

布局出来的样式,点击蓝色的删除链接,会删除对应的那一行内容

陌陌说:重要知识点:获取输入框的数值,创建子节点和给子节点添加内容,删除对应的节点