本篇内容介绍了“怎么使用html+css+js实现简易版ChatGPT聊天机器人”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><style type="text/css">@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Poppins:wght@200;300&display=swap");* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Poppins", sans-serif;}body {background: #4b5c66;}.container {--light-color: #fff;height: 580px;background: var(--light-color);bottom: 50px;right: 10px;box-shadow: 0px 0px 15px 0px black;}@media screen and (min-width:440px) {.container {position: fixed;}}.chat-header {height: 60px;display: flex;align-items: center;padding: 0px 30px;background-color: #0652c0;color: var(--light-color);font-size: 1.5rem;}.chat-header .logo {height: 35px;width: 35px;box-shadow: 0px 0px 10px 0px black;}.chat-header img {height: 100%;width: 100%;}.chat-header .title {padding-left: 10px;}.chat-body {height: 465px;display: flex;flex-direction: column;padding: 8px 10px;align-items: flex-end;overflow-y: auto;}.chat-input {height: 60px;display: flex;align-items: center;border-top: 1px solid #ccc;}.input-sec {flex: 9;}.send {flex: 1;padding-right: 4px;}#txtInput {line-height: 30px;padding: 8px 10px;border: none;outline: none;caret-color: black;font-size: 1rem;width: 100%;}.chatbot-message,.user-message {padding: 8px;background: #ccc;margin: 5px;width: max-content;border-radius: 10px 3px 10px 10px;}.chatbot-message {background: #0652c0;color: var(--light-color);align-self: flex-start;border-radius: 10px 10px 3px 10px;}</style></head><body><div class="container"><div class="chat-header"><div class="logo"><img src="https://cache.yisu.com/upload/information/20230225/112/12222.jpg" alt="cwt" /></div><div class="title">简易版Chat GPT</div></div><div class="chat-body"></div><div class="chat-input"><div class="input-sec"><input type="text" id="txtInput" placeholder="在这里写" autofocus /></div><div class="send"><img src="https://haiyong.site/img/svg/send.svg" alt="send" /></div></div></div><script>const responseObj = {你好: "你好，我是最强人工智能ChatGPT，我能回答你所有问题，快来和我聊天吧！",五块钱怎么花三天: "坐公交回去找妈妈",你是小黑子吗: "不，我不是小黑子。我是OpenAI的聊天机器人模型ChatGPT",你为什么和我聊天: "只因你太美",嘿: "嘿！ 这是怎么回事",今天几号: new Date().toDateString(),几点了: new Date().toLocaleTimeString(),};const chatBody = document.querySelector(".chat-body");const txtInput = document.querySelector("#txtInput");const send = document.querySelector(".send");send.addEventListener("click", () => renderUserMessage());txtInput.addEventListener("keyup", (event) => {if (event.keyCode === 13) {renderUserMessage();}});const renderUserMessage = () => {const userInput = txtInput.value;renderMessageEle(userInput, "user");txtInput.value = "";setTimeout(() => {renderChatbotResponse(userInput);setScrollPosition();}, 600);};const renderChatbotResponse = (userInput) => {const res = getChatbotResponse(userInput);renderMessageEle(res);};const renderMessageEle = (txt, type) => {let className = "user-message";if (type !== "user") {className = "chatbot-message";}const messageEle = document.createElement("div");const txtNode = document.createTextNode(txt);messageEle.classList.add(className);messageEle.append(txtNode);chatBody.append(messageEle);};const getChatbotResponse = (userInput) => {return responseObj[userInput] == undefined ?"听不太懂呢试试输点别的" :responseObj[userInput];};const setScrollPosition = () => {if (chatBody.scrollHeight > 0) {chatBody.scrollTop = chatBody.scrollHeight;}};</script></body></html>
以上就是怎么使用html+css+js实现简易版ChatGPT聊天机器人的详细内容，更多关于怎么使用html+css+js实现简易版ChatGPT聊天机器人的资料请关注九品源码其它相关文章！