你能帮我写一串html的ChatGPT聊天机器人代码吗
当然可以！这是一个简单的ChatGPT聊天机器人的HTML代码，你可以根据自己的需要进行修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ChatGPT聊天机器人</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
background-color: #fff;
box-shadow: 0 0 10px #ddd;
border-radius: 5px;
overflow: hidden;
}
.chat-box {
height: 400px;
overflow-y: scroll;
margin-bottom: 20px;
padding: 10px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 5px;
}
.chat-box p {
margin-bottom: 10px;
}
.form-box {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.form-box label {
margin-bottom: 5px;
}
.form-box input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-box input[type="submit"] {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>ChatGPT聊天机器人</h1>
</header>
<main>
<div class="chat-box">
<p>ChatGPT: 欢迎来到ChatGPT聊天机器人，请问有什么可以帮助您的？</p>
</div>
<form class="form-box" onsubmit="return false;">
<label for="user-input">您的问题：</label>
<input type="text" id="user-input">
<input type="submit" value="发送">
</form>
</main>
<script>
const chatBox = document.querySelector(".chat-box");
const userInput = document.querySelector("#user-input");
const form = document.querySelector(".form-box");
form.addEventListener("submit", (event) => {
event.preventDefault();
if (userInput.value.trim() !== "") {
chatBox.innerHTML += `<p>用户: ${userInput.value.trim()}</p>`;
chatBox.scrollTop = chatBox.scrollHeight;
userInput.value = "";
setTimeout(() => {
chatBox.innerHTML += `<p>ChatGPT: 对不起，我还不知道如何回答这个问题。</p>`;
chatBox.scrollTop = chatBox.scrollHeight;
}, 1000);
}
});
</script>
</body>
</html>
这段代码包括了一个头部、一个主体、一个聊天框和一个表单。在用户提交表单时，它会将用户输入的内容显示在聊天框中，并在一秒钟后显示ChatGPT的回复。你可以修改代码中的ChatGPT回复来满足你的需求。
原文地址: https://www.cveoy.top/t/topic/baBe 著作权归作者所有。请勿转载和采集!