JavaScript仿微博发布信息案例

现在很多类似以微博发布动态的效果，下面为一个用 JavaScript写的小小的类似微博发布信息的案例

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>微博发布</title><style type="text/css">*{padding: 0;margin: 0;}ul {list-style: none;}.box {width: 600px;height: auto;border: 1px solid #ccc;margin: 100px auto;text-align: center;padding: 30px 0;background-color: rosybrown;}.box textarea {width: 450px;resize: none; /*设置文本不能过拖动*/}.box li {width: 450px;line-height: 30px;border-bottom: 1px dashed #ccc;margin-left: 80px;text-align: left;}.box li a {float: right;}</style><script type="text/javascript">window.onload = function （）{//获取数组的第一个var btn = document.getElementsByTagName（"button"）[0];var txt = document.getElementsByTagName（"textarea"）[0];var ul = document.createElement（"ul"）; btn.parentNode.appendChild（ul）; //添加子节点btn.onclick = function （）{//1.需要判断文本中是否有内容if（txt.value == ""）{alert（"亲！内容不能为空哦！！"）;return false; //让操作就在这个地方终止}var newli = document.createElement（"li"）; //创建一个新的li标签newli.innerHTML = txt.value +"<a href="javascript:;">删除</a>"; //给新的标签添加内容，并拼接删除已连接ul.appendChild（newli）;//清空输入框txt.value = "";var aa = document.getElementsByTagName（"a"）;//获取所有的a标签for（var i = 0;i<aa.length;i++）{ // 遍历点击删除aa[i].onclick = function （） {this.parentNode.remove（）;}}}}</script></head><body><div class="box">微博发布:<textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button></div></body></html>

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

陌陌说：重要知识点：获取输入框的数值，创建子节点和给子节点添加内容，删除对应的节点。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。