Maison >interface Web >js tutoriel >Exemple de code pour créer une fonction d'affichage des messages de discussion QQ et de soumission de commentaires à l'aide de JS

Exemple de code pour créer une fonction d'affichage des messages de discussion QQ et de soumission de commentaires à l'aide de JS

Y2Joriginal: 2017-05-23 13:17:461827parcourir

Cet article présente principalement en détail l'implémentation JavaScript des fonctions d'affichage et de soumission de messages de chat QQ. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Affichage et soumission de messages de chat QQ Commentaires et autres principes de mise en œuvre. , le contenu spécifique est le suivant

<!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>

[Recommandations associées]

1 Tutoriel vidéo gratuit Javascript

2. explication du code du plug-in de zoom avant et arrière du doigt mobile

Explication détaillée du tutoriel de pliage en accordéon bootstrap

4. >Explication détaillée de l'instance distante de boîte modale bootstrap

Exemple détaillé de JS implémentant l'effet de défilement de sélection

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée d'exemples d'implémentation de l'effet de défilement de sélection avec JSArticle suivant：Explication détaillée d'exemples d'implémentation de l'effet de défilement de sélection avec JS

Articles Liés

Voir plus