正文

HTML5仿微信消息界面代码

/0 浏览量
0514

创建一个仿微信消息界面的HTML5页面，我们可以使用HTML、CSS和JavaScript来实现。下面是一个简单的示例，展示了如何构建这样一个界面。

HTML结构

首先，我们需要定义消息界面的基本结构。以下是一个简单的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="container">
        <div class="chat-box">
            <div class="message" data-type="received">
                <img src="avatar1.jpg" alt="收信人头像">
                <div class="text">你好，这是条接收到的消息！</div>
            </div>
            <div class="message" data-type="sent">
                <img src="avatar2.jpg" alt="发信人头像">
                <div class="text">你好，这是条发送的消息！</div>
            </div>
        </div>
        <div class="input-box">
            <input type="text" placeholder="输入消息">
            <button>发送</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们需要为这个界面添加一些样式。以下是一个简单的CSS样式表：

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    max-width: 600px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-box {
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.message[data-type="sent"] {
    justify-content: flex-end;
}

.message img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.text {
    background-color: #dcdcdc;
    padding: 10px;
    border-radius: 20px;
    max-width: 70%;
}

.input-box {
    display: flex;
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
}

.input-box input {
    flex: 1;
    border: none;
    padding: 10px;
    border-radius: 20px 0 0 20px;
    background-color: #e5e5e5;
}

.input-box button {
    padding: 10px 15px;
    background-color: #1AAD19;
    border: none;
    border-radius: 0 20px 20px 0;
    color: white;
    cursor: pointer;
}

JavaScript交互

最后，我们需要一些JavaScript来处理发送消息的功能：

// script.js
document.querySelector('.input-box button').addEventListener('click', function() {
    var input = document.querySelector('.input-box input');
    var messageText = input.value.trim();

    if (messageText !== '') {
        var messageElement = document.createElement('div');
        messageElement.classList.add('message', 'sent');
        messageElement.innerHTML = `
            <img src="avatar2.jpg" alt="发信人头像">
            <div class="text">${messageText}</div>
        `;
        document.querySelector('.chat-box').appendChild(messageElement);

        input.value = '';
    }
});

这段代码会在用户点击发送按钮时，创建一个新的消息元素并将其添加到聊天框中。

以上就是创建一个简单的HTML5仿微信消息界面的基本步骤。你可以根据自己的需求添加更多的功能和样式。

-- 展开阅读全文 --