jquery制作qq简易聊天框

好的，以下是一个简单的基于 jQuery 的 QQ 聊天框实现：

HTML 代码：

<div id="chat-box">
  <div id="chat-content"></div>
  <div id="chat-input">
    <input type="text" id="chat-message" placeholder="请输入消息...">
    <button id="chat-send">发送</button>
  </div>
</div>

CSS 代码：

#chat-box {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  overflow-y: scroll;
}
#chat-content {
  height: 300px;
  padding: 10px;
}
#chat-input {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
}
#chat-message {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#chat-send {
  width: 60px;
  height: 30px;
  margin-left: 10px;
  border: none;
  border-radius: 5px;
  background-color: #09f;
  color: #fff;
  cursor: pointer;
}

JavaScript 代码：

$(function() {
  var $chatContent = $('#chat-content');
  var $chatMessage = $('#chat-message');
  
  // 发送消息
  $('#chat-send').on('click', function() {
    var message = $chatMessage.val();
    if (message !== '') {
      $chatContent.append('<p>我：' + message + '</p>');
      $chatMessage.val('');
    }
  });
  
  // 监听回车键
  $chatMessage.on('keydown', function(event) {
    if (event.keyCode === 13) {
      $('#chat-send').trigger('click');
    }
  });
});

这段代码实现了一个简单的聊天框，用户可以在输入框中输入消息并发送，消息会显示在聊天框中。你可以根据需求进行更改和扩展。