<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aadadasd</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.chat-container {
border: 1px solid #ccc;
background-color: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.messages {
padding: 20px;
max-height: 100%;
overflow-y: auto;
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
background-color: #f0f0f0;
}
.user-message {
background-color: #c3e6cb;
align-self: flex-start;
margin-right: 600px;
}
.bot-message {
background-color: #f8f9fa;
align-self: flex-end;
margin-left: 600px;
}
.input-container {
display: flex;
border-top: 1px solid #ccc;
padding: 10px;
}
.input-field {
flex-grow: 1;
padding: 5px;
border: none;
border-radius: 5px;
}
.send-button {
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
div:hover {
}
body, html {
height: 100%;
margin: 0;
}
/* 在你的 <style> 标签中添加以下内容 */
.guangb {
display: inline-block;
width: 8px;
height: 20px;
background-color: #070707;
animation: blinkCursor 0.8s infinite;
}
.copy-button {
position: absolute;
top: 10px;
right: 20px;
}
@keyframes blinkCursor {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.typewriter {
position: relative;
font-family: "Courier New", monospace;
font-size: 14px;
white-space: pre;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
background-color: #f4f4f4;
}
.language-javascript {
color: #d73a49;
}
.copy-button {
position: absolute;
top: 0;
right: 0;
margin-top: -20px;
margin-right: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css">
</head>
<body>
<div style="height: 10%; width: 100%; background-color: #f0f0f0; display: flex;">
<span style="background-color: #0e3838; flex: 20%; height: 100%;color: azure">标志一</span>
<span style="background-color: #272b2b; flex: 60%; height: 100%;color: azure">标志二</span>
<span style="background-color: #0e1d26; flex: 20%; height: 100%;color: azure">标志三</span>
</div>
<hr style="border: 1px solid #a00a0a; width: 100%; margin: 0;">
<div style="height: 90%; width: 100%; background-color: #f0f0f0; display: flex;">
<span style="background-color: #0e3838; flex: 20%; height: 100%;color: azure">左边</span>
<!-- 中间-->
<span style="background-color: #272b2b; flex: 60%; height: 100%;">
<div class="chat-container" style="height: 90%;width: 100%">
<div class="messages" id="messages">
<!-- 聊天消息将会显示在这里 -->
<div class="typewriter">
<button class="copy-button" style="margin-top: 10px" id="codebutton">复制代码</button>
<pre><code class="language-javascript" id="code"></code></pre>
</div>
</div>
</div>
<div class="input-container" style="height: 10%;">
<input type="text" class="input-field" style="width: 200px;height: 50px" id="messageInput" placeholder="输入消息..." value="你是谁?">
<button class="send-button"style="width: 50px;height: 50px" id="sendButton">发送</button>
</div>
</span>
<!-- 右边 -->
<span style="background-color: #0e1d26; flex: 20%; height: 100%;color: azure">右边</span>
</div>
<!--<div style="background-color: #2aa0a0 ;width: 200px;height: 100px;text-align: center;"> TGBB</div>-->
<!--<div style="background-color: #5969f6;width:200px;height: 100px;text-align: center">VV</div>-->
<!--<div style="background-color: #5969f6;width:200px;height: 100px;text-align: center">FGF</div>-->
<!--<div style="background-color: #5969f6;width:200px;height: 100px;text-align: center">ASSS</div>-->
<!--<div style="background-color: #5969f6;width:200px;height: 100px;text-align: center">SSX</div>-->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js"></script>
<script>
const messagesContainer = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
const typewriterElement = document.querySelector('.typewriter');
typewriterElement.style.display = 'none'; // 同时隐藏 typewriter 容器
sendButton.addEventListener('click', () => {
const userMessage = messageInput.value.trim();
if (userMessage !== '') {
appendMessage('user', userMessage);
simulateBotReply(userMessage);
messageInput.value = '';
}
});
function appendMessage(sender, message) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message', sender + '-message');
if (sender=='user'){
messageDiv.textContent = message;
}
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
// 如果是代码块,则将Markdown内容转换为HTML
if (sender=='bot'){
// 添加打字机效果
typeMessage(messageDiv, message);
// 添加闪烁的光标
const cursor = document.createElement('span');
cursor.classList.add('guangb');
messageDiv.appendChild(cursor);
}
}
function typeMessage(element, message) {
const messageArray = message.split('');
let currentIndex = 0;
function typeNextCharacter() {
if (currentIndex < messageArray.length) {
console.log(messageArray[currentIndex])
element.textContent += messageArray[currentIndex];
currentIndex++;
setTimeout(typeNextCharacter, 50); // 打字速度,单位为毫秒
}else {
typewriterElement.style.display = 'block'; // 同时隐藏 typewriter 容器
typeCode();
}
}
typeNextCharacter();
}
function simulateBotReply(userMessage) {
// 在这里可以编写模拟的机器人回复逻辑
const botReply =
'我是小白,一个人工智能语言模型。我被训练用于理解和生成自然语言文本,以回答各种问题,提供信息,以及执行各种文本相关的任务。如果您有任何问题或需要帮助,都可以随时问我!'
;
setTimeout(() => {
appendMessage('bot', botReply);
}, 1000);
}
const codeElement = document.getElementById('code');
const codeText = `
function greet(name) {
return \`Hello, \${name}!\`;
}
console.log(greet("World"));
`;
let charIndex = 0;
function typeCode() {
if (charIndex < codeText.length) {
const char = codeText.charAt(charIndex);
codeElement.textContent += char;
charIndex++;
setTimeout(typeCode, 50); // Adjust the typing speed here
}
}
// const codebutton = document.getElementById('codebutton');
//
// codebutton.addEventListener('click', () => {
// const userMessage = messageInput.value.trim();
// if (userMessage !== '') {
// appendMessage('user', userMessage);
// simulateBotReply(userMessage);
// messageInput.value = '';
// }
// });
// 将 "复制代码" 按钮的点击事件处理函数移到全局范围
const copyButtons = document.querySelectorAll('.copy-button');
copyButtons.forEach(button => {
button.addEventListener('click', () => {
const codeBlock = button.nextElementSibling.querySelector('code');
const textArea = document.createElement('textarea');
textArea.value = codeBlock.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
button.textContent = '已复制';
setTimeout(() => {
button.textContent = '复制代码';
}, 2000);
});
});
// 之后的代码保持不变
</script>
</html>
使用html、css、js写的一个对话框,实现打字机效果,一个字一个字显示出来
最新推荐文章于 2024-07-23 19:54:48 发布