当前位置：首页 > article >正文

前端聊天室页面开发(赛博朋克科技风,内含源码)

article 2024/10/27 22:10:41

肝了一天，经过各种处理美化，肝出来了一个赛博朋克科技风的前端页面，用的原生三件套html+css+javascript开发的，本来想是加点功能调用一下gpt接口，但是基本都需要webscoket通信，可惜我js学的不是很深入，捣鼓半天还是放弃了，如果有感兴趣一起做点日常生活用的小demo的小伙伴也可以联系我，有觉得页面还不错想要源码的小伙伴，我把源码放在下面啦，记得点赞收藏哦。

1-indexl.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="page-container">
        <div class="chat-container">
            <div class="chat-header">
                <h1>ai聊天室</h1>
            </div>
            <div class="chat-messages message-container" id="chatMessages">
                <!-- 消息将在这里动态添加 -->
            </div>
            <div class="user-info">当前用户: 我</div>
            <form class="chat-input" id="chatForm">
                <input type="text" id="messageInput" placeholder="输入消息..." required>
                <button type="submit">发送</button>
            </form>
        </div>
        <div class="divider"></div>
        <div class="text-container">
            <div id="textContent" class="text-content">
                这里是初始的长文本内容。点击左侧的消息可以更新这里的内容。
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2-styles.css

body {
    font-family: '隶书';  
    margin: 0;
    padding: 0;
    background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */
    color: #7ee2ff;
    height: 100vh;
    overflow: hidden;

    background-image : url('./1.jpg');  
    /* 背景图片不重复 */  
    background-repeat: no-repeat;  
    /* 背景图片居中显示 */  
    background-position: center;  
    /* 背景图片覆盖整个元素 */  
    background-size: cover;  
}

.page-container {
    display: flex;
    height: 100vh;

}

.chat-container {
    
    width: 50%;
    background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(126, 226, 255, 0.3);


}

.divider {
    width: 2px;
    background-color: #7ee2ff;
    box-shadow: 0 0 10px #7ee2ff;
}

.text-container {
    width: 50%;
    padding: 20px;
    background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;


}

.text-content {
    font-size: 18px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #7ee2ff;
    text-shadow: 0 0 5px #7ee2ff;
}

.chat-header {
    background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */
    /* color: #ff00ff; */
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(126, 226, 255, 0.3);
}

.chat-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */
    /* background-image: linear-gradient(to bottom, #141c2b 0%, #0a0e17 100%); */
    will-change: transform;
    backface-visibility: hidden;
}

.message-container {
    display: flex;
    flex-direction: column;
}

.user-info {
    padding: 10px 15px;
    background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */
    color: #d3d3d3;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 -2px 4px rgba(126, 226, 255, 0.3);
    border-bottom: 1px solid #7ee2ff;
}

.message {
    display: inline-block;
    margin-bottom: 15px;
    padding: 10px 15px;
    max-width: 60%;
    transition: all 0.2s ease;
    cursor: pointer;
    word-wrap: break-word;
    position: relative;
    font-size: 18px;
    box-shadow: 0 0 5px rgba(126, 226, 255, 0.3);
}

.message.sent {
    background-color: rgba(30, 44, 74, 0.8);
    color: #7ee2ff;
    border-radius: 20px 0px 20px 20px;
    align-self: flex-end;
    margin-left: auto;
    border: 1px solid rgba(126, 226, 255, 0.3);
}

.message.received {
    background-color: rgba(20, 28, 43, 0.8);
    color: #ff00ff;
    border-radius:  0px 20px 20px 20px;
    border: 1px solid rgba(255, 0, 255, 0.3);
}

.message:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 10px rgba(126, 226, 255, 0.5);
}


.chat-input {
    display: flex;
    padding: 15px;
    background-color: rgba(26, 26, 26, 0.8);
    box-shadow: 0 -2px 10px rgba(126, 226, 255, 0.1);
}

.chat-input input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid rgba(126, 226, 255, 0.3);
    border-radius: 20px;
    background-color: rgba(10, 14, 23, 0.8);
    color: #7ee2ff;
    margin-right: 10px;
    font-family: 'Orbitron', sans-serif;
    transition: all 0.2s ease;
}

.chat-input input:focus {
    outline: none;
    border-color: #7ee2ff;
    box-shadow: 0 0 5px rgba(126, 226, 255, 0.5);
}

.chat-input button {
    padding: 10px 20px;
    background-color: rgba(30, 44, 74, 0.8);
    color: #7ee2ff;
    border: 1px solid rgba(126, 226, 255, 0.3);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
}

.chat-input button:hover {
    background-color: rgba(126, 226, 255, 0.2);
    color: #7ee2ff;
    box-shadow: 0 0 10px rgba(126, 226, 255, 0.5);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0e17;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #7ee2ff, #ff00ff);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #7ee2ff, #ff00ff);
}

/* 添加霓虹灯效果 */
* {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

3-script.js

document.addEventListener('DOMContentLoaded', () => {
    const chatForm = document.getElementById('chatForm');
    const messageInput = document.getElementById('messageInput');
    const chatMessages = document.getElementById('chatMessages');
    const textContent = document.getElementById('textContent');

    chatForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const message = messageInput.value.trim();
        if (message) {
            addMessage(message, 'sent');
            messageInput.value = '';
            // 模拟接收到的消息
            setTimeout(() => {
                addMessage('这是一条自动回复的消息。', 'received');
            }, 1000);
        }
    });

    function addMessage(text, type) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', type);
        messageElement.textContent = text;
        
        // 添加点击事件
        messageElement.addEventListener('click', () => {
            updateTextContent(text);
        });

        const messageContainer = document.createElement('div');
        messageContainer.classList.add('message-container');
        messageContainer.appendChild(messageElement);

        chatMessages.appendChild(messageContainer);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function updateTextContent(text) {
        textContent.textContent = text;
    }

    // 添加一些初始消息
    addMessage("你好！欢迎来到炫酷聊天室。", "received");
    addMessage("这是一个示例消息。", "sent");
    addMessage("点击任何消息可以在右侧查看完整内容。", "received");

    // messageInput.addEventListener('input', function() {
    //     const maxLength = Math.floor(chatMessages.offsetWidth * 0.6);
    //     if (this.value.length > maxLength) {
    //         this.value = this.value.slice(0, maxLength);
    //     }
    // });
});

背景图片图片：1.jpg