js第八题

题八：滚动弹幕

要求：

1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕；

2.底部中间有一个发送功能，可以发送新的弹幕；

3.底部的发送部分可以向下收起和弹出。

html

  <div id="danmu-container"></div>
    
    <div id="control-panel">
        <button id="toggle-btn">▲</button>
        <div id="input-box">
            <input type="text" id="danmu-input" placeholder="输入弹幕内容">
            <button id="send-btn">发送</button>
        </div>
    </div>

css

  body {
            margin: 0;
            overflow: hidden;
            background: white;
            font-family: '微软雅黑', sans-serif;
        }

        #danmu-container {
            height: calc(100vh - 60px);
            position: relative;
        }

        .danmu {
            position: absolute;
            white-space: nowrap;
            animation: move linear;
            pointer-events: none;
        }

        @keyframes move {
            from { transform: translateX(100vw); }
            to { transform: translateX(-100%); }
        }

        #control-panel {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: all 0.3s ease;
        }

        #control-panel.hidden {
            transform: translate(-50%, 100%);
        }

        #input-box {
            background: rgba(255,255,255,0.9);
            padding: 15px;
            border-radius: 10px 10px 0 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
            display: flex;
            gap: 10px;
        }

        #toggle-btn {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            border: none;
            padding: 5px 20px;
            border-radius: 15px 15px 0 0;
            cursor: pointer;
            box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        }

        #danmu-input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-width: 300px;
        }

        #send-btn {
            background: #2196F3;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        #send-btn:hover {
            background: #1976D2;
        }

js

  const danmuContainer = document.querySelector('danmu-container');
        const danmuInput = document.querySelector('danmu-input');
        const sendBtn = document.querySelector('send-btn');
        const toggleBtn = document.querySelector('toggle-btn');
        const controlPanel = document.querySelector('control-panel');

        // 生成随机颜色
        function getRandomColor() {
            return '#' + Math.floor(Math.random()*16777215).toString(16);
        }

        // 创建弹幕元素
        function createDanmu(text) {
            const danmu = document.createElement('div');
            danmu.className = 'danmu';
            danmu.textContent = text;
            
            // 随机样式
            danmu.style.color = getRandomColor();
            danmu.style.fontSize = `${Math.floor(12 + Math.random() * 12)}px`;
            danmu.style.top = `${Math.random() * (danmuContainer.offsetHeight - 30)}px`;
            
            // 动画配置
            const duration = 8 + Math.random() * 4; // 8-12秒
            danmu.style.animation = `move ${duration}s linear`;
            
            // 动画结束后移除元素
            danmu.addEventListener('animationend', () => {
                danmu.remove();
            });

            return danmu;
        }

        // 发送弹幕
        function sendDanmu() {
            const text = danmuInput.value.trim();
            if (!text) return;

            const danmu = createDanmu(text);
            danmuContainer.appendChild(danmu);
            danmuInput.value = '';
        }

        // 事件监听
        sendBtn.addEventListener('click', sendDanmu);
        danmuInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendDanmu();
        });

        // 控制面板切换
        let isPanelVisible = true;
        toggleBtn.addEventListener('click', () => {
            isPanelVisible = !isPanelVisible;
            controlPanel.classList.toggle('hidden', !isPanelVisible);
            toggleBtn.textContent = isPanelVisible ? '▲' : '▼';
        });

        // 初始示例弹幕
        setTimeout(() => {
            ['Hello World!', '这是一个弹幕示例', '可以输入文字试试', '点击箭头收起面板'].forEach(text => {
                danmuContainer.appendChild(createDanmu(text));
            });
        }, 500);

视频

8