HTML聊天自动回复窗源码,jquery网站聊天窗代码(原创)

以下是一个基于HTML、CSS和jQuery的简单聊天窗口源码，可以用于自动回复和人工回复：

HTML代码：

<div class="chat-window">
  <div class="chat-header">
    <h3>Chat with us</h3>
  </div>
  <div class="chat-body">
    <div class="message">
      <p>Hello! How can I help you today?</p>
    </div>
  </div>
  <div class="chat-footer">
    <input type="text" placeholder="Type your message...">
    <button>Send</button>
  </div>
</div>

CSS代码：

.chat-window {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
  font-size: 14px;
}

.chat-header {
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.chat-body {
  height: 300px;
  overflow-y: scroll;
  padding: 10px;
}

.message {
  margin-bottom: 10px;
}

.message p {
  background-color: #f2f2f2;
  border-radius: 5px;
  padding: 5px 10px;
}

.chat-footer {
  border-top: 1px solid #ddd;
  padding: 10px;
}

.chat-footer input[type="text"] {
  width: 200px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 14px;
}

.chat-footer button {
  background-color: #007bff;
  border: none;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}

.chat-footer button:hover {
  background-color: #0069d9;
}

jQuery代码：

$(document).ready(function() {
  // 自动回复的消息列表
  var autoReplies = [
    "Hello! How can I help you today?",
    "I'm sorry, I don't understand. Can you please rephrase your question?",
    "Thank you for contacting us. We will get back to you as soon as possible."
  ];
  var index = 0; // 当前自动回复的消息索引

  // 发送消息
  function sendMessage() {
    var input = $(".chat-footer input[type='text']");
    var message = input.val();
    if (message !== "") {
      var html = "<div class='message'><p>" + message + "</p></div>";
      $(".chat-body").append(html);
      input.val("");
      // 模拟自动回复
      setTimeout(function() {
        var reply = autoReplies[index];
        index = (index + 1) % autoReplies.length; // 循环遍历自动回复的消息列表
        var html = "<div class='message'><p>" + reply + "</p></div>";
        $(".chat-body").append(html);
        // 滚动聊天窗口到底部
        $(".chat-body").animate({scrollTop: $(".chat-body")[0].scrollHeight}, 1000);
      }, 1000);
      // 滚动聊天窗口到底部
      $(".chat-body").animate({scrollTop: $(".chat-body")[0].scrollHeight}, 1000);
    }
  }

  // 监听发送按钮的点击事件
  $(".chat-footer button").click(function() {
    sendMessage();
  });

  // 监听输入框的回车键事件
  $(".chat-footer input[type='text']").keypress(function(event) {
    if (event.keyCode === 13) {
      sendMessage();
    }
  });
});

以上代码可以实现一个基本的聊天窗口，自动回复消息列表可以根据实际情况进行修改和扩充。