滚动弹幕JS - 技术栈

题八：滚动弹幕

要求：

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

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

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

原理：

首先写出弹幕的大小，颜色，等，！！一定要return，不然出不来。
要实现左移要不断加速度，当位置大于屏宽时，关闭定时器并移除弹幕。
在输入框中的文本传值时，调用createDanmuElement和滚动弹幕函数。

主要是靠公式：Math.floor(Math.random() * n ) + 1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #danmu-container { position: relative; width: 100%; height: 400px; border: 1px solid #ccc; } #down { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #f0f0f0; padding: 10px; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } #down.hidden { bottom: -50px; } #message-input { width: 300px; padding: 5px; margin-right: 10px; } #send { padding: 5px 10px; } #up { position: absolute; bottom: 10px; left: 10px; } </style> </head> <body> <body>

<button id="up">收起/弹出</button> <script> const danmuContainer = document.getElementById('danmu-container'); const Down = document.getElementById('down'); const messageInput = document.getElementById('message-input'); const sendButton = document.getElementById('send'); const upButton = document.getElementById('up');

复制代码

         let isInputHidden = false;
 
         function createDanmuElement(text) {
             const danmu = document.createElement('div')
             danmu.textContent = text;
             danmu.style.position = 'absolute'
             //弹幕进入
             danmu.style.left = '-200px'
             //弹幕高度随机
             danmu.style.top = Math.floor(Math.random() * (danmuContainer.clientHeight - 30)) + 'px'
             //颜色随机
             danmu.style.color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
             //大小随机
             danmu.style.fontSize = Math.floor(Math.random() * 20) + 12 + 'px'
             //弹幕不换行
             danmu.style.whiteSpace = 'nowrap'
             //添加在后面
             danmuContainer.appendChild(danmu)
             return danmu
         }
         function moveDanmu(danmu) {
             //弹幕初始位置
             let left = -200 
             const speed = Math.floor(Math.random() * 3 ) + 1
             //从左到右
             const Timer = setInterval(() => {
                 //实现右移，每次移动一个speed
                 left += speed
                 danmu.style.left = left + 'px'
                 if (left > danmuContainer.clientWidth) {
                     clearInterval(Timer)
                     //关闭定时器后要移除弹幕
                     danmuContainer.removeChild(danmu)
                 }
             }, 10)
         }
         //传值，把打字框里的文本传给弹幕
         sendButton.addEventListener('click', function() {
             const text = messageInput.value
             const danmu1 = createDanmuElement(text)
             moveDanmu(danmu1)
             messageInput.value = ''
         });
         upButton.addEventListener('click', function() {
             isInputHidden =!isInputHidden
             if (isInputHidden) {
                 Down.classList.add('hidden')
                 upButton.textContent = '弹出'
             } else {
                 Down.classList.remove('hidden')
                 upButton.textContent = '收起'
             }
         })
         //先飘一些弹幕
         for (let i = 0; i < 5; i++) {
             const text = `弹幕1111`
             const danmu = createDanmuElement(text)
             moveDanmu(danmu)
         }
     </script>

</body> </html>

视频：

滚动弹幕