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