Detailed code explanation of QQ chat message display and comment submission functions using JavaScript-JS Tutorial-php.cn

Detailed code explanation of QQ chat message display and comment submission functions using JavaScript

黄舟

Release： 2017-05-25 09:26:39

Original

1859 people have browsed it

This article mainly introduces in detail JavaScript to implement QQ chat message display and comment submission functions. It has certain reference value. Interested friends can refer to it

QQ chat message display, comment submission and other implementation principles, the specific content is as follows

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

Copy after login

The above is the detailed content of Detailed code explanation of QQ chat message display and comment submission functions using JavaScript. For more information, please follow other related articles on the PHP Chinese website!