Heim > Artikel > Web-Frontend > JavaScript-Nachahmung Weibo-Veröffentlichungsinformationsfall

JavaScript-Nachahmung Weibo-Veröffentlichungsinformationsfall

高洛峰Original: 2016-12-06 16:11:361283Durchsuche

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Rufen Sie mithilfe von JavaScript Parameter in der URL abNächster Artikel：Rufen Sie mithilfe von JavaScript Parameter in der URL ab

In Verbindung stehende Artikel

Mehr sehen