考核第八题-CSDN博客

本文链接：https://blog.csdn.net/2403_88462732/article/details/145670216

视频

QQ2025216-2189

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doumnment</title>
</head>
 
<body>
    <div id="danmaku-container"></div>
    <div id="send-container">
        <button id="toggle-btn">收起</button>
        <input type="text" id="send-input" placeholder="发送弹幕">
        <button id="send-btn">发送</button>
    </div>
 </body>
 
</html>

CSS

 <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
 
        #danmaku-container {
            position: relative;
            width: 100vw;
            height: calc(100vh - 50px);
            background-color: #f0f0f0;
            overflow: hidden;
        }
 
        .danmaku {
            position: absolute;
            white-space: nowrap;
            animation: moveDanmaku linear infinite;
        }
 
        @keyframes moveDanmaku {
            from {
                right: 100%;
            }
            to {
                right: -100%;
            }
        }
 
        #send-container {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #ccc;
            padding: 10px 0;
            text-align: center;
            transition: transform 0.3s ease;
        }
 
        #toggle-btn {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #fff;
            border: 1px solid #ccc;
            border-bottom: none;
            padding: 5px 10px;
            cursor: pointer;
        }
 
        #send-input {
            width: 300px;
            padding: 5px;
            margin-right: 10px;
        }
 
        #send-btn {
            padding: 5px 10px;
        }
    </style>

<script>
        const danmakuContainer = document.getElementById('danmaku-container');
        const sendInput = document.getElementById('send-input');
        const sendBtn = document.getElementById('send-btn');
        const toggleBtn = document.getElementById('toggle-btn');
        const sendContainer = document.getElementById('send-container');
 
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
 
        function getRandomFontSize() {
            return Math.floor(Math.random() * 20) + 12 + 'px';
        }
 
        function getRandomDuration() {
            return Math.floor(Math.random() * 10) + 5 + 's';
        }
 
        function createDanmaku(text) {
            const danmaku = document.createElement('div');
            danmaku.classList.add('danmaku');
            danmaku.textContent = text;
            danmaku.style.color = getRandomColor();
            danmaku.style.fontSize = getRandomFontSize();
            danmaku.style.animationDuration = getRandomDuration();
            danmaku.style.top = Math.floor(Math.random() * (danmakuContainer.offsetHeight - 20)) + 'px';
            danmakuContainer.appendChild(danmaku);
 
            danmaku.addEventListener('animationend', () => {
                danmaku.remove();
            });
        }
 
        function sendDanmaku() {
            const text = sendInput.value.trim();
            if (text) {
                createDanmaku(text);
                sendInput.value = '';
            }
        }
 
        sendBtn.addEventListener('click', sendDanmaku);
 
        sendInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                sendDanmaku();
            }
        });
 
        let isCollapsed = false;
        toggleBtn.addEventListener('click', () => {
            if (isCollapsed) {
                sendContainer.style.transform = 'translateY(0)';
                toggleBtn.textContent = '收起';
            } else {
                sendContainer.style.transform = 'translateY(100%)';
                toggleBtn.textContent = '点开';
            }
            isCollapsed = !isCollapsed;
        });
 
        const defaultDanmakus = ['1234567890'];
        defaultDanmakus.forEach((text) => {
            createDanmaku(text);
        });
    </script>