Heim > Artikel > Web-Frontend > Detaillierte Code-Erklärung der QQ-Chat-Nachrichtenanzeige und Kommentarübermittlungsfunktionen mithilfe von JavaScript

Detaillierte Code-Erklärung der QQ-Chat-Nachrichtenanzeige und Kommentarübermittlungsfunktionen mithilfe von JavaScript

黄舟Original: 2017-05-25 09:26:391794Durchsuche

In diesem Artikel wird hauptsächlich JavaScript zur Implementierung der QQ-Chat-Nachrichtenanzeige und der Kommentarübermittlungsfunktion vorgestellt. Interessierte Freunde können sich darauf beziehen

QQ-Chat-Nachrichtenanzeige. Kommentarübermittlung und andere Implementierungsprinzipien, der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }

   .bos {
    margin: 100px auto;
    width: 350px;
    position: relative;
   }

   .bos a {
    float: right;
   }

   button {
    position: relative;
    left: 301px;
    bottom: 0;
   }

   textarea {
    width: 350px;
    resize: none;
   }

   ul li {
    list-style: none;
   }
  </style>

  <script type="text/javascript">
   window.onload = function() {
    var txt = document.getElementById(&#39;txt&#39;);
    var btn = document.getElementsByTagName(&#39;button&#39;)[0];
    var oUl = document.getElementsByTagName(&#39;ul&#39;)[0];

    btn.onclick = function() {
     if(txt.value == &#39;&#39;) {
      alert(&#39;请输入...&#39;);
      return false; //结束事件*******
     }

     var newli = document.createElement(&#39;li&#39;);  //创建标签<li></li>
     newli.innerHTML = txt.value + &#39;<a href = "#">删除<a>&#39;;

     //oUl.appendChild(newli);  //将创建标签<li></li>加到最后面

     var lis = oUl.childNodes; //oUl.children
     oUl.insertBefore(newli, lis[0]);  //将创建标签<li></li>加到最前面
     txt.value = &#39;&#39;;


     //删除发出去的消息
     var oA = document.getElementsByTagName(&#39;a&#39;);
     for(var i = 0; i < oA.length; i++) {
      oA[i].onclick = function() {
       oUl.removeChild(this.parentNode);
      }
     }
    }
   }
  </script>

 </head>

 <body>
  <p id="box" class="bos">
   <textarea name="" id="txt" cols="30" rows="10"></textarea>
   <button>submit</button>
   <ul></ul>
  </p>
 </body>

</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Code-Erklärung der QQ-Chat-Nachrichtenanzeige und Kommentarübermittlungsfunktionen mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：JavaScript implementiert eine illegale Implementierungsmethode, die bei der Eingabe eines Namens angezeigt wirdNächster Artikel：JavaScript implementiert eine illegale Implementierungsmethode, die bei der Eingabe eines Namens angezeigt wird

In Verbindung stehende Artikel

Mehr sehen