实现一个弹幕app

Posted 2020-10-09 子非鱼的鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现一个弹幕app相关的知识，希望对你有一定的参考价值。

功能：发射弹幕，清空弹幕，实现弹幕动画

1，结构html；

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
　　　　<!--引入JQ，野狗云sdk-->

    <script src="js/jquery-1.11.1.js"></script>
    <script src = "https://cdn.wilddog.com/js/client/current/wilddog.js"></script>
    <script src="js/dm.js"></script>
</head>
<body>
<div class="dm">
    <!-- 上部分 -->
    <div class="dm_screen">
        <div class="dm_mask"></div>
        <div class="dm_show"></div>
    </div>
    <div class="send">
        <div class="s_filter">
            <div class="s_con">
                <p>
                    <input placeholder="说点什么?" class="s_txt" type="text" />
                </p>
                <p>
                    <input type="button" value="发 射" class="s_sub" />
                      <input type="button" value="清 屏" class="s_del" />
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

实现弹幕功能需要使用到野狗云来储存数据

在www.wildog.com 注册一个账号，创建一个应用引用：

var ref = new Wilddog("https://[appId].wilddogio.com/");

第一步将数据提交到野狗云

$(‘.s_sub‘).click(function(){
        //获取输入框文字
        var text = $(‘.s_txt‘).val();
        //将数据写到云端message节点下，child定位子节点
        ref.child(‘message‘).push(‘text‘);
        //清空输入栏
        $(‘.s_txt‘).val(‘‘);
    });

第二步响应按键点击，即在点击Enter按键的时候会触发事件，将数据提交到野狗云，Enter的按键对应的是13

trigger() 方法触发被选元素的指定事件类型。

//响应按键点击事件
    $(‘.s_txt‘).keypress(function(){
        if(event.keyCode == "13"){
            $(‘.s_sub‘).trigger(‘click‘);
        }
    });

清除按钮，即点击之后弹幕墙的内容会清空

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

//按键清除事件
    $(‘.s_del‘).click(function(){
        ref.remove();
        arr = [];
        $(‘.s_show‘).empty();
    });

第四步：监听云端数据变更，云端数据变化，弹幕框里数据也跟着变化。

事件监听是指通过事件触发的方式来获取云端变化的数据。通过监听云端事件，本地获取并处理数据，保持和数据实时同步。

我们需要用到的是child_added与on() 方法配合（on（）用于与事件配合来监听指定节点的数据。）更多详情

https://docs.wilddog.com/sync/Web/guide/retrieve-data.html

ref.child(‘message‘).on(‘child_added‘ , function(snapshot){
        var text = snapshot.value;
        arr.push(text);
        var textObj = $("<div class=\"dm_message\"></div>");
        textObj.text(text);
        $(‘.s_show‘).append(textObj);
        moveObj(textObj);
    });
//
    ref.on(‘child_removed‘,function(){
        arr = [];
        $(‘.s_show‘).empty();
    });
});

按照时间显示弹幕内容

var topMin = $(‘.dm_mask‘).offset().top;//显示框距离顶部的距离
    var topMax = topMin+$(‘.dm_mask‘).height();//底部距离顶部的距离
    var _top = topMin; // 每个滚动消息距顶部距离

    var moveObj = function(obj){
        var _left = $(‘.dm_mask‘).width()-obj.width();
        _top = _top + 50;
        if(_top > (topMax - 50)) {
          _top = topMin;
        }
        obj.css({
            left: _left,
            top: _top,
            color: getRandomColor()
        });     
        var time  = 20000+10000*Math.random();
        obj.animate({
            left:‘-‘+_left+‘px‘//左边距离逐渐减小
        },time,function(){
            obj.remove();
        });    
    }

获取随机颜色

var getRandomColor = function(){
        return ‘#‘ + (function(h) {
          return new Array(7 - h.length).join("0") + h
        })((Math.random() * 0x1000000 << 0).toString(16))
    }
/*
var getRandomColor = function(){
    return ‘#‘+Math.floor(Math.random()*16777215).toString(16); 
}

*/


//在屏幕上输出
var getAndRun = function() {
        if (arr.length > 0) {
          var n = Math.floor(Math.random() * arr.length + 1) - 1;
          var textObj = $("<div>" + arr[n] + "</div>");
          $(".dm_show").append(textObj);
          moveObj(textObj);
        }

        setTimeout(getAndRun, 3000);
      }

以上是关于实现一个弹幕app的主要内容，如果未能解决你的问题，请参考以下文章

Android弹幕实现：基于B站弹幕开源系统