js实现弹幕

实现弹幕的基本思路

弹幕的核心功能包括文字在屏幕上移动、颜色随机、出现位置随机等。通过JavaScript可以动态创建DOM元素，并利用CSS动画或定时器控制其移动。

HTML结构准备

创建一个容器用于承载弹幕元素，通常是一个固定大小的div。

<div id="danmu-container" style="width: 800px; height: 500px; position: relative; overflow: hidden; border: 1px solid #000;"></div>
<input type="text" id="danmu-input" placeholder="输入弹幕内容">
<button id="send-danmu">发送弹幕</button>

CSS样式设计

弹幕元素需要绝对定位，并设置动画效果。可以通过transform或left属性实现移动。

.danmu-item {
  position: absolute;
  white-space: nowrap;
  font-size: 20px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

JavaScript逻辑实现

动态创建弹幕元素，并控制其从右向左移动。

const container = document.getElementById('danmu-container');
const input = document.getElementById('danmu-input');
const sendButton = document.getElementById('send-danmu');

function createDanmu(text) {
  const danmu = document.createElement('div');
  danmu.className = 'danmu-item';
  danmu.textContent = text;

  // 随机颜色
  const color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
  danmu.style.color = color;

  // 随机垂直位置
  const top = Math.floor(Math.random() * (container.offsetHeight - 20));
  danmu.style.top = `${top}px`;

  // 初始位置在容器右侧
  danmu.style.left = `${container.offsetWidth}px`;

  container.appendChild(danmu);

  // 移动动画
  const duration = 5000; // 动画持续时间（毫秒）
  const startTime = performance.now();

  function moveDanmu(timestamp) {
    const progress = timestamp - startTime;
    const distance = container.offsetWidth + danmu.offsetWidth;
    const translateX = distance - (distance * progress / duration);

    if (progress < duration) {
      danmu.style.transform = `translateX(-${translateX}px)`;
      requestAnimationFrame(moveDanmu);
    } else {
      container.removeChild(danmu);
    }
  }

  requestAnimationFrame(moveDanmu);
}

sendButton.addEventListener('click', () => {
  if (input.value.trim()) {
    createDanmu(input.value.trim());
    input.value = '';
  }
});

input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter' && input.value.trim()) {
    createDanmu(input.value.trim());
    input.value = '';
  }
});

优化弹幕性能

大量弹幕可能导致性能问题，可以通过以下方式优化：

• 使用requestAnimationFrame代替setTimeout或setInterval，确保动画流畅。
• 弹幕移出屏幕后及时移除DOM元素，避免内存泄漏。
• 对于大量弹幕，可以考虑使用Canvas渲染代替DOM操作。

扩展功能

• 弹幕速度控制：通过调整duration参数改变弹幕移动速度。
• 弹幕密度控制：限制同时显示的弹幕数量，避免重叠。
• 弹幕互动：点击弹幕触发事件，如暂停或点赞。

完整代码示例

将上述HTML、CSS和JavaScript整合到一个文件中即可运行。通过输入框输入文字并点击发送或按回车键，弹幕会从右向左移动。