溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript怎么實現(xiàn)QQ聊天消息展示和評論提交功能

發(fā)布時間:2021-04-25 09:46:20 來源:億速云 閱讀:187 作者:小新 欄目:web開發(fā)

這篇文章主要介紹JavaScript怎么實現(xiàn)QQ聊天消息展示和評論提交功能,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!

Java有哪些集合類

Java中的集合主要分為四類:1、List列表:有序的,可重復(fù)的;2、Queue隊列:有序,可重復(fù)的;3、Set集合:不可重復(fù);4、Map映射:無序,鍵唯一,值不唯一。

QQ聊天消息顯示,提交評論等實現(xiàn)原理,具體內(nèi)容如下

<!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('txt');
    var btn = document.getElementsByTagName('button')[0];
    var oUl = document.getElementsByTagName('ul')[0];

    btn.onclick = function() {
     if(txt.value == '') {
      alert('請輸入...');
      return false; //結(jié)束事件*******
     }

     var newli = document.createElement('li');  //創(chuàng)建標(biāo)簽<li></li>
     newli.innerHTML = txt.value + '<a href = "#">刪除<a>';

     //oUl.appendChild(newli);  //將創(chuàng)建標(biāo)簽<li></li>加到最后面

     var lis = oUl.childNodes; //oUl.children
     oUl.insertBefore(newli, lis[0]);  //將創(chuàng)建標(biāo)簽<li></li>加到最前面
     txt.value = '';


     //刪除發(fā)出去的消息
     var oA = document.getElementsByTagName('a');
     for(var i = 0; i < oA.length; i++) {
      oA[i].onclick = function() {
       oUl.removeChild(this.parentNode);
      }
     }
    }
   }
  </script>

 </head>

 <body>
  <div id="box" class="bos">
   <textarea name="" id="txt" cols="30" rows="10"></textarea>
   <button>submit</button>
   <ul></ul>
  </div>
 </body>

</html>

以上是“JavaScript怎么實現(xiàn)QQ聊天消息展示和評論提交功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI