JS实现弹幕的简单操作

现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果，那么如何用JS实现这样的效果呢，用一个初学者的方法记录下这个方法，欢迎大牛指导。

  1. 首先需要操作文档必须拿到Dom中的元素，当然有很多方法，这里还是用document.querySelector.

  2. 这边也是为了键盘和鼠标都可发送封装了一个函数function sendMsg(){
    首先需要创建一个容器来接受你编辑的内容，这里用span标签，当然其他标签也可
    var oSpan=document.cerateElement(“span”)
    将oSpan插入到需要展示的oVideoBox
    oVideoBox.appendChild(oSpan)
    给oSpan加入class用于编辑插入的样式，当然也可以用js,这里用的CSS样式oSpan.classList.add(“danmu”)
    用innerHTML接用户图像及弹幕内容这里用ES6的一个``
    oSpan.innerHTML =` < img src ="./source/lei.jpg" /> ${oContent.value}
    计算弹幕出现的初始位置，left位移初始位置即oVideoBox的宽度oVideoBox.offsetWidth.也是oSpan的初始定位oSpan.offsetLeft
    top位移的初始即oVideoBox内随机的高度，避免超出
    var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight;
    var top=Math.round(Math.random()*maxTop)
    oSpan.style.top = top+ ‘px’
    当然JS的动画也离不开计时器。这边也是用setInterval()
    var timer=setInterval(()=>{
    var left=oSpan.offsetLeft
    left-=10
    oSpan.style.left= left+ ‘px’
    这边判断一下如果超出屏幕就把弹幕和计时器移出
    if(left<-oSpan.offsetWidtb){
    clearInterval(timer);
    oSpan.remove();}},100)
    以上就完成了简易版的弹幕函数就封装完成了，后面就可以引用了，

  3. 事件从点击开始，弹幕也是创建点击事件oSend.onclick,
    oSend.οnclick=function(){引用函数sendMsg()}

  4. 后面可以加上一个键盘的enter可以发送,是一个事件委托window.οnkeydοwn=function(e){
    var ev = e || event;
    var keyCode = ev.keyCode || ev.which;
    判断如果按的是键盘enter的keycode码是13和alt组合
    if (keyCode === 13 && ev.altKey) {
    sendMsg();}}
    以下是bod代码，可以练练

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作业_弹幕</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .wrapBox {
      width: 800px;
      height: 550px;
      border: 1px solid #000;
      margin: 50px auto 0;
    }

    .videoBox {
      height: 500px;
      position: relative;
      overflow: hidden;
    }

    .videoBox img {
      width: 100%;
      height: 100%;
    }

    video {
      width: 100%;
      /* height: 500px; */
    }

    .danmuSend {
      display: flex;
      height: 50px;
    }

    #content {
      flex: 1;
    }

    #send {
      width: 100px;
    }

    .danmu {
      color: #f00;
      font-size: 20px;
      position: absolute;
      left: 800px;
      top: 0;
      white-space: nowrap;
    }

    .danmu img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      vertical-align: middle;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="wrapBox">
    <div class="videoBox">
      <img src="../../source/bg.jpg" />
      <!-- <span class="danmu">我是弹幕</span> -->
      <!-- <span class="danmu">我是弹幕</span>
      <span class="danmu">我是弹幕</span>
      <span class="danmu">我是弹幕</span>
      <span class="danmu">我是弹幕</span> -->
    </div>
    <div class="danmuSend">
      <input id="content" type="text">
      <button id="send">发送</button>
    </div>
  </div>
</body>

以下是JS的代码：

<script>


  var oSend = document.querySelector('#send');
  var oContent = document.querySelector('#content');
  var oVideoBox = document.querySelector('.videoBox');




  function sendMsg() {
    var content = oContent.value;

    var oSpan = document.createElement('span');
    oSpan.className = 'danmu';
    oSpan.innerHTML = `<img src="../../source/bg.jpg">${content}`;

    oVideoBox.appendChild(oSpan);

    var maxTop = oVideoBox.clientHeight - oSpan.offsetHeight;

    oSpan.style.top = Math.round(Math.random() * maxTop) + 'px';
    
    var timer = setInterval(() => {
      var left = oSpan.offsetLeft;
      left -= 10;
      oSpan.style.left = left + 'px';
      if (left < -oSpan.offsetWidth) {
        clearInterval(timer);
        oSpan.remove();
      }
    }, 100);
  }

  oSend.onclick = function () {
    sendMsg();
  }

  window.onkeydown = function (e) {
    var ev = e || event;
    var keyCode = ev.keyCode || ev.which;
    if (keyCode === 13 && ev.altKey) {
      sendMsg();
    }
  }

</script>
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生