JavaScript-Nachahmung Weibo-Veröffentlichungsinformationsfall-js-Tutorial-php.cn

JavaScript-Nachahmung Weibo-Veröffentlichungsinformationsfall

高洛峰

Freigeben： 2016-12-06 16:11:36

Original

1343 Leute haben es durchsucht

Heutzutage gibt es viele ähnliche Effekte wie das Posten von Nachrichten auf Weibo. Das Folgende ist ein kleines Beispiel für das Posten von Informationen auf Weibo, die in JavaScript geschrieben sind

<!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=&#39;javascript:;&#39;>删除</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>

Nach dem Login kopieren

Klicken Sie für den Layoutstil auf den blauen Link „Löschen“, um die entsprechende Inhaltszeile zu löschen.

JavaScript-Nachahmung Weibo-Veröffentlichungsinformationsfall

Momo sagte: Wichtige Wissenspunkte: Ermitteln Sie den Wert des Eingabefelds, erstellen Sie Unterknoten, fügen Sie Inhalte zu den Unterknoten hinzu und löschen Sie die entsprechenden Knoten.