在线聊天室 - 带雪花飘落特效 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>在线聊天室 - 带雪花飘落特效</title>
    <meta charset='UTF-8'>
    <style type='text/css'>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        .chat-box {
            height: 400px;
            overflow-y: scroll;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .chat-box p {
            margin-bottom: 10px;
        }
        .chat-box .message {
            margin-bottom: 20px;
        }
        .chat-box .message:nth-child(odd) {
            background-color: #f9f9f9;
        }
        .chat-box .message .sender {
            font-weight: bold;
            margin-right: 5px;
        }
        .chat-box .message .time {
            font-size: 12px;
            color: #888;
            margin-left: 5px;
        }
        .form-box {
            display: flex;
            flex-direction: column;
        }
        .form-box input[type='text'], .form-box input[type='file'] {
            margin-bottom: 10px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
            font-size: 16px;
        }
        .form-box input[type='submit'] {
            background-color: #007bff;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        .snowflake {
            position: fixed;
            top: -10px;
            background-color: #fff;
            border-radius: 50%;
            animation: snowflake-fall infinite linear;
            z-index: 9999;
        }
        @keyframes snowflake-fall {
            0% { top: -10px; opacity: 1; }
            100% { top: 110%; opacity: 0; }
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='chat-box' id='chat-box'></div>
        <form class='form-box' id='form-box' enctype='multipart/form-data'>
            <input type='text' id='message' name='message' placeholder='输入消息...'/>
            <input type='file' id='file' name='file'/>
            <input type='submit' value='发送'/>
        </form>
    </div>
    <script type='text/javascript'>
        const chatBox = document.getElementById('chat-box');
        const formBox = document.getElementById('form-box');
        const messageInput = document.getElementById('message');
        const fileInput = document.getElementById('file');
        let userName = '';
         // 获取用户名
        while (!userName) {
            userName = prompt('请输入您的用户名：');
        }
         // 发送消息
        function sendMessage(e) {
            e.preventDefault();
            const message = messageInput.value.trim();
            if (!message) {
                return;
            }
            const time = new Date().toLocaleTimeString();
            const messageHTML = `<div class='message'><p><span class='sender'>${userName}:</span>${message}<span class='time'>${time}</span></p></div>`;
            chatBox.insertAdjacentHTML('beforeend', messageHTML);
            messageInput.value = '';
        }
         // 发送图片
        function sendImage(e) {
            e.preventDefault();
            const file = fileInput.files[0];
            if (!file) {
                return;
            }
            const time = new Date().toLocaleTimeString();
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                const imageHTML = `<div class='message'><p><span class='sender'>${userName}:</span><img src='${reader.result}' alt='图片'><span class='time'>${time}</span></p></div>`;
                chatBox.insertAdjacentHTML('beforeend', imageHTML);
                fileInput.value = '';
            }
        }
         formBox.addEventListener('submit', sendMessage);
        fileInput.addEventListener('change', sendImage);
         // 雪花特效
        function snowflake() {
            const snowflakeDiv = document.createElement('div');
            snowflakeDiv.classList.add('snowflake');
            snowflakeDiv.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
            snowflakeDiv.style.animationDuration = (Math.floor(Math.random() * 10) + 5) + 's';
            snowflakeDiv.innerHTML = '❄';
            document.body.appendChild(snowflakeDiv);
            setTimeout(() => {
                snowflakeDiv.remove();
            }, 10000);
        }
         setInterval(snowflake, 500);
    </script>
</body>
</html>