JS制作QQ聊天消息展示和评论提交功能的代码示例-tutorial js-php.cn

JS制作QQ聊天消息展示和评论提交功能的代码示例

Y2J

Lepaskan： 2017-05-23 13:17:46

asal

1840 orang telah melayarinya

这篇文章主要为大家详细介绍了JavaScript实现QQ聊天消息展示和评论提交功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

QQ聊天消息显示，提交评论等实现原理，具体内容如下

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

Salin selepas log masuk

【相关推荐】

1. Javacript免费视频教程

2. 移动端手指放大缩小插件代码详解

3. bootstrap手风琴折叠的教程详解

4. bootstrap模态框远程实例详解

5. JS实现marquee滚动效果的实例详解

Atas ialah kandungan terperinci JS制作QQ聊天消息展示和评论提交功能的代码示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!