Exemple de code pour créer une fonction d'affichage des messages de discussion QQ et de soumission de commentaires à l'aide de JS-js tutoriel-php.cn

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

Y2J

Libérer： 2017-05-23 13:17:46

original

1794 Les gens l'ont consulté

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>

Copier après la connexion

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