Explication détaillée du code des fonctions d'affichage des messages de chat QQ et de soumission de commentaires à l'aide de JavaScript-js tutoriel-php.cn

Explication détaillée du code des fonctions d'affichage des messages de chat QQ et de soumission de commentaires à l'aide de JavaScript

黄舟

Libérer： 2017-05-25 09:26:39

original

1862 Les gens l'ont consulté

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

Affichage des messages de chat QQ, soumission de 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

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!