js实现发表留言添加表情特效代码

要在JavaScript中实现发表留言时添加表情特效，可以使用以下步骤和代码示例：

基础概念

HTML结构：创建一个用于输入留言和选择表情的区域。
CSS样式：定义表情特效的样式。
JavaScript逻辑：处理用户输入和表情选择，并将表情特效应用到留言中。

优势

提升用户体验，使留言功能更加生动有趣。
增加用户互动性，鼓励更多用户参与交流。

类型

静态表情：预定义的表情图标。
动态表情：通过GIF或其他动画形式展示的表情。

应用场景

社交媒体平台
论坛
即时通讯工具

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<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">
        <textarea id="message" placeholder="请输入留言..."></textarea>
        <div id="emoji-picker">
            <!-- 表情选择器 -->
            <span class="emoji" data-emoji="😊">😊</span>
            <span class="emoji" data-emoji="😂">😂</span>
            <span class="emoji" data-emoji="🤣">🤣</span>
        </div>
        <button id="submit-btn">提交</button>
        <div id="messages"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.container {
    width: 300px;
    margin: 0 auto;
}

#message {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
}

#emoji-picker {
    display: flex;
    gap: 5px;
}

.emoji {
    cursor: pointer;
    font-size: 20px;
    transition: transform 0.2s;
}

.emoji:hover {
    transform: scale(1.2);
}

#messages {
    margin-top: 20px;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', () => {
    const messageInput = document.getElementById('message');
    const emojiPicker = document.getElementById('emoji-picker');
    const submitBtn = document.getElementById('submit-btn');
    const messagesContainer = document.getElementById('messages');

    emojiPicker.addEventListener('click', (event) => {
        if (event.target.classList.contains('emoji')) {
            const emoji = event.target.getAttribute('data-emoji');
            insertEmoji(messageInput, emoji);
        }
    });

    submitBtn.addEventListener('click', () => {
        const message = messageInput.value.trim();
        if (message) {
            displayMessage(message);
            messageInput.value = '';
        }
    });

    function insertEmoji(input, emoji) {
        const start = input.selectionStart;
        const end = input.selectionEnd;
        const value = input.value;
        input.value = value.substring(0, start) + emoji + value.substring(end);
        input.selectionStart = input.selectionEnd = start + emoji.length;
    }

    function displayMessage(message) {
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        messageElement.classList.add('message');
        messagesContainer.appendChild(messageElement);
    }
});