滾動彈幕案例

一、需求

1.頁面上漂浮字體大小不一、顏色不一，從左向右滾動的彈幕；
2.底部中間有一個發送功能，可以發送新的彈幕；
3.底部的發送部分可以向下收起和彈出。

二、html

<div class="container"><div class="content"><p>哈哈哈哈哈</p><p>哈哈哈哈哈哈哈哈</p><p>哈哈哈哈哈</p><p>哈哈哈哈哈哈哈</p><p>哈哈哈哈哈哈哈哈哈哈哈哈哈</p><p>哈哈哈哈哈哈哈哈哈哈</p><p>哈哈哈</p></div><div class="input-box"><input type="text"><button>發射</button></div><button class="show">收起</button>
</div>

三、css

<style>.container{margin:0 auto;width: 500px;height: 400px;border:1px solid black;position:relative;}.content {width: 500px;height: 365px;position:relative;overflow: hidden;}.input-box {width: 500px;height: 30px;position:absolute;bottom:0;}.input-box input {width: 400px;height: 25px;float:left;} .input-box button{width: 90px;height: 30px;float:right;cursor:pointer;}@keyframes moveDanmu {from{left:-100%}to{left:100%}}p{white-space: nowrap;position:absolute;animation: moveDanmu 8s linear infinite;left:-100%;}.show {width: 50px;height: 30px;position:absolute;left:500px;bottom:0px;}
</style>

四、javascript

<script>const container =document.querySelector('.container')const content =document.querySelector('.content')const danmus = document.querySelectorAll('.content p')const text = document.querySelector('.input-box input')const button = document.querySelector('.input-box button')const inputBox = document.querySelector('.input-box')const show = document.querySelector('.show')//創建隨機顏色function getRandomRGBColor(){const r = Math.floor(Math.random()*255)const g = Math.floor(Math.random()*255)const b = Math.floor(Math.random()*255)return `rgb(${r},${g},${b})`}//創建top值function getRandomTop(){return (Math.floor(Math.random()*content.offsetHeight)- 44 +'px')}console.log(content.offsetHeight);//創建隨機大小function getRandomFontSize(){return (Math.floor(Math.random()*30)+14+'px')}//發送彈幕button.addEventListener('click',function(){if(text.value!==''){const danmu = document.createElement('p')danmu.textContent = text.valuedanmu.style.color = getRandomRGBColor()danmu.style.top= getRandomTop()danmu.style.fontSize = getRandomFontSize()content.appendChild(danmu)text.value = ''// 彈幕滾動結束后移除danmu.addEventListener('animationend', () => {danmuContainer.removeChild(danmu);});}})//已有彈幕danmus.forEach((hadDanmu)=>{const randomDelay=Math.floor(Math.random()*10000)hadDanmu.style.color = getRandomRGBColor()hadDanmu.style.top= getRandomTop()hadDanmu.style.fontSize = getRandomFontSize()hadDanmu.style.animationDelay = randomDelay+'ms'})//展開收起let isInputHidden = falseshow.addEventListener('click',function(){if(isInputHidden){inputBox.style.display='block'show.textContent='收起'}else{inputBox.style.display='none'show.textContent='展開'}isInputHidden=!isInputHidden})
</script>

五、樣式截圖

六、實現原理

1. 使用Math.random隨機生成方法，構建隨機顏色、隨機大小、隨機絕對定位高度
2. 對于已有的彈幕，針對每一個彈幕隨機生成顏色大小位置，并且設置css動畫（animation）使其從左到右運動，對每個彈幕設置不同的延遲時間出現，形成彈幕效果。
3. 對于即將發送的彈幕，需新建p元素，且同樣隨機生成顏色大小位置，彈幕內容為input的value值，最后將其添加至已有彈幕p元素后。
4. 發送條的展開收起，引入布爾變量isInputHidden并設置初始值為false，按鈕內容初始設置為收起，發送條display初始值為block，當點擊收起按鈕，按鈕收起–>展開，發送條block–>none，isInputHidden值取反，相反同理。