Heim > Artikel > Web-Frontend > Codebeispiel für die Funktion zur Anzeige von QQ-Chatnachrichten und zur Kommentarübermittlung mithilfe von JS

Codebeispiel für die Funktion zur Anzeige von QQ-Chatnachrichten und zur Kommentarübermittlung mithilfe von JS

Y2JOriginal: 2017-05-23 13:17:461784Durchsuche

Dieser Artikel stellt hauptsächlich die JavaScript-Implementierung der QQ-Chat-Nachrichtenanzeige und Kommentarübermittlungsfunktionen im Detail vor. Interessierte Freunde können sich auf

QQ-Chatnachrichtenanzeige und Kommentarübermittlung und andere Implementierungsprinzipien beziehen , 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>

[Verwandte Empfehlungen]

1 Javascript kostenloses Video-Tutorial

2 Erklärung des mobilen Finger-Zoom-In- und Zoom-Out-Plug-In-Codes

Detaillierte Erklärung des Bootstrap-Akkordeon-Falt-Tutorials

4 >Detaillierte Erläuterung der Bootstrap-Modal-Box-Remote-Instanz

Detailliertes Beispiel für die Implementierung des Marquee-Scrolling-Effekts durch JS

Das obige ist der detaillierte Inhalt vonCodebeispiel für die Funktion zur Anzeige von QQ-Chatnachrichten und zur Kommentarübermittlung mithilfe von JS. 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：Detaillierte Erläuterung von Beispielen für die Implementierung des Marquee-Scrolling-Effekts mit JSNächster Artikel：Detaillierte Erläuterung von Beispielen für die Implementierung des Marquee-Scrolling-Effekts mit JS

In Verbindung stehende Artikel

Mehr sehen