滚动弹幕案例

滚动弹幕案例

一、需求

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.value
      danmu.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 = false
  show.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值取反，相反同理。