Home > Article > Web Front-end > Code example for making QQ chat message display and comment submission function using JS

Code example for making QQ chat message display and comment submission function using JS

Y2JOriginal: 2017-05-23 13:17:461794browse

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

QQ chat message display and submission. Comments 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>

[Related recommendations]

1. Javascript free video tutorial

2. Mobile terminal Detailed explanation of finger zoom in and out plug-in code

3. Detailed explanation of bootstrap accordion folding tutorial

4. Detailed explanation of remote instance of bootstrap modal box

5. Detailed explanation of examples of JS implementation of marquee scrolling effect

The above is the detailed content of Code example for making QQ chat message display and comment submission function using JS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of examples of implementing marquee scrolling effect with JSNext article：Detailed explanation of examples of implementing marquee scrolling effect with JS

See more

Code example for making QQ chat message display and comment submission function using JS

Related articles