jQuery實現(xiàn)簡單QQ聊天框

更新時間：2020年08月27日 11:09:40 作者：陳仙生

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單QQ聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)簡單QQ聊天框的具體代碼，供大家參考，具體內(nèi)容如下

先放一張效果圖！

1.首先我們把基本框架搭出來，還要準備三張圖片用來當作頭像，下面是html的內(nèi)容

<body>
<section id="chat">
  <div class="chatBody"></div>
  <div>
    <img src="images/icon.jpg">
  </div>
  <textarea class="chatText"></textarea>
  <div class="btn">
    <span>關(guān)閉(C)</span>
    <span id="send">發(fā)送(S)</span>
  </div>
</section>
</body>

2.頭部引入jQuery，我用的版本是3.5.1的

<script src="js/jquery-3.5.1.js"></script>

3.先寫一個事件加載函數(shù)，網(wǎng)頁加載完成后執(zhí)行此函數(shù)

$(funtion () {

})

4.分別用一個數(shù)組來保存頭像圖片的路徑和網(wǎng)友昵稱

$(funtion () {
 let pic = ['images/head01.jpg', 'images/head02.jpg', 'images/head03.jpg'];
  let name = ['chen', 'liu', 'feng'];
})

5.給發(fā)送按鈕添加一個點擊事件，核心在這里

$(function () {
      let pic = ['images/head01.jpg', 'images/head02.jpg', 'images/head03.jpg'];
      let name = ['chen', 'liu', 'feng'];
      $('#send').click(function () {
        let num = Math.floor((Math.random()*3)); // 隨機獲取一個0到2的整數(shù)，用作數(shù)組下標，從而使頭像和昵稱隨機顯示
        let text = $('.chatText').val();     // 獲取輸入框的文本內(nèi)容，并賦值給text
        if (text.length > 0) {          // 文本內(nèi)容的長度大于0就執(zhí)行里面的函數(shù)
          $('.chatBody').append(        // 在div里面追加內(nèi)容
            `<div class="item">
              <img src="${pic[num]}" alt="頭像"> // 顯示頭像 
              <span>${name[num]}</span>     // 顯示昵稱
              <div>${text}</div>        // 顯示文本內(nèi)容
             </div>`
          );
        }
        $('.chatText').val(''); // 獲取完輸入框的內(nèi)容后清空輸入框
      })
 })

css樣式就看自己喜好調(diào)啦！

他的實現(xiàn)邏輯很簡單，點擊事件獲取輸入框內(nèi)容，然后用append()方法將模板字符串追加到容器里面，最后清空輸入框，頭像和昵稱用隨機數(shù)生成配合數(shù)組就可以搞定！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: