本篇内容介绍了“怎么使用html+CSS+js实现简易版ChatGPT聊天机器人”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码如下：&l
本篇内容介绍了“怎么使用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://file.lsjlt.com/upload/202307/04/wnkm2s1biox.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聊天机器人”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
--结束END--
本文标题: 怎么使用html+css+js实现简易版ChatGPT聊天机器人
本文链接: https://www.lsjlt.com/news/350056.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0