JavaScript仿微博发布信息案例

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

<Meta charset="UTF-8"> 微博发布

window.onload = function (){
  //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>数组的第一个
  var btn = document.getElementsByTagName("button")[0];
  var txt = document.getElementsByTagName("textarea")[0];
  var ul = document.createElement("ul"); 
  btn.parentNode.appendChild(ul); //<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>子节点
  btn.onclick = function (){

    //1.需要判断文本中是否有<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>
    if(txt.value == ""){

      alert("亲!<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>不能为空哦!!");

      return false; //让操作就在这个地方终止
    }

    var newli = document.createElement("li"); //创建一个新的li<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>
    newli.innerHTML = txt.value +"<a href='javascript:;'>删除</a>"; //给新的<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，并拼接<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>已连接
    ul.appendChild(newli);

    //清空输入框
    txt.value = "";

    var aa = document.getElementsByTagName("a");//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>所有的a<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>

    for(var i = 0;i<aa.length;i++){ // 遍历点击<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>

      aa[i].onclick = function () {

        this.parentNode.remove();
      }
    }


  }

}

Box">

微博发布:<textarea name="" id="" cols="30" rows="10">

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

JavaScript仿微博发布信息案例

猜你在找的JavaScript相关文章