jQuery实现简单QQ聊天框

  

  

    
  
  
  

    关闭(C)
    发送(S)
  

$(funtion () {

})

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

$(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的整数，用作数组下标，从而使头像和昵称随机显示
        let text = $('.chatText').val();     // 获取输入框的文本内容，并赋值给text
        if (text.length > 0) {          // 文本内容的长度大于0就执行里面的函数
          $('.chatBody').append(        // 在div里面追加内容
            `

               // 显示头像 
              ${name[num]}     // 显示昵称
              
${text}
        // 显示文本内容
             
`
          );
        }
        $('.chatText').val(''); // 获取完输入框的内容后清空输入框
      })
 })