master

分支 (1)

管理

管理

master

operator-web
/
chat_demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Box</title>
    <style>
        .chat-container {
            width: 100%;
            position: absolute;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .chat-message {
            max-width: 80%;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 5px;
        }
        .chat-input {
            width: 80%;
            padding: 10px;
            margin-top: 5px;
        }
        .chat-box {
            height: 200px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>

<div class="chat-container">
    <div class="chat-box">
        <!-- Chat messages will be added here -->
    </div>
    <input type="text" class="chat-input" placeholder="Type your message here...">
</div>

<script>
    // JavaScript to add messages to the chat box
    function addMessage(message) {
        const chatBox = document.querySelector('.chat-box');
        const messageElement = document.createElement('div');
        messageElement.classList.add('chat-message');
        messageElement.textContent = message;
        chatBox.appendChild(messageElement);
        // Scroll to the bottom of the chat box
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    // Example usage
    addMessage('Hello, how are you?');
    addMessage('I am doing great, thanks!');
    addMessage('111');
    addMessage('222');
    addMessage('333');
    addMessage('444');
    addMessage('555');
    addMessage('666');
    addMessage('777');
    addMessage('888');
    addMessage('999');
    addMessage('000');
    addMessage('10');
    addMessage('11');
    addMessage('12');
    addMessage('13');
    addMessage('14');
    addMessage('15');
    addMessage('16');
    addMessage('17');
    addMessage('18');
    addMessage('19');
</script>

</body>
</html>