使用html、css、js写的一个对话框，实现打字机效果，一个字一个字显示出来

最新推荐文章于 2024-06-12 10:22:29 发布
白川BC
最新推荐文章于 2024-06-12 10:22:29 发布
阅读量1.4k
点赞数
分类专栏：前端文章标签： java html5 css javascript
本文链接：https://blog.csdn.net/m0_64464020/article/details/132430999
版权
前端专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!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>