【JQuery】弹幕APP

虽然我是一名实打实的产品喵，但是为了能够和程序猿们愉快地沟通（让撕逼再和谐一点），我自学了一些代码知识，写了一些不入流不靠谱不成熟的“三不”应用，随便扔在这里分享一下。

简介

弹幕确实是个有意思的东西，但它其实并不复杂，拥有一点前端基础的都能写出来。

我写的这个弹幕APP也就只用了bootstrap和JQuery，外加一个叫wilddog（野狗云）的即时通讯服务器，实现了多人同时在线弹幕聊天。

在这里可以强推一下wilddog野狗云，真的特别好用，不需要你有任何服务器知识，纯前端可以开发即时通讯、身份验证等多种应用程序，而且免费。

这个项目感觉很适合前端新手练手用，推荐一下哈~

截图

弹幕飞起中...

代码

$(document).ready(function() {
  
    //创建通讯实体
    //野狗云的使用方法你自己去他官网看案例啦~
    var configSync = {
    authDomain: 'wd3384719095ozfucu.wilddogio.com',
    syncURL: 'https://wd3384719095ozfucu.wilddogio.com/',
  };  
    wilddog.initializeApp(configSync);
    var danmu = wilddog.sync().ref('/msg');
    
    /*初始化变量*/
    //发送按钮
    var shoot = $(".shoot");
    //消息文本框
    var msg_txt = $(".msg");
    //清空按钮
    var clear = $(".clear");
    //弹幕面板
    var danmu_box = $(".danmu-box");
    //消息表格
    var danmu_table = $(".danmu-table > tbody");
    //获取随机整数
    function randomNum(min,max){
        var Range = max - min;
        var Rand = Math.random();
        var num = min + Math.round(Rand * Range);    //四舍五入
        return num;
    }
    //获取用户登入网站的时间点
    var enter_date = new Date();
    var enter_time_point = enter_date.getTime();
    
    //个位数前面加0
    function plusZero(x){
      if(x<10){
        return '0'+x;
      } else {
        return x.toString();
      }
    }
    //获取标准时间格式
    function getTime(deit){
      const y = deit.getFullYear();
      const m = plusZero(deit.getMonth()+1);
      const d = plusZero(deit.getDate());
      const h = plusZero(deit.getHours());
      const mi = plusZero(deit.getMinutes());
      return y + "." + m + "." + d + " " + h + ":" + mi;
    }
    //鼠标点击发送消息至通讯云
    shoot.click(function(){
        //获取消息
        var msg = $(".msg").val();
        var msg_date = new Date();
        var msg_time_point = msg_date.getTime();
        //如果文本框内有内容
        if(msg.length > 0){
            //发送至通讯云
            danmu.push({
                "msg": msg,
                "time": msg_time_point
            });
        } else {
            alert("不能发空消息的哦~");
        }
        //清空文本框
        msg_txt.val("");
    });
    
    //按下回车发送消息至通讯云
    msg_txt.keypress(function(e){     
        if(event.keyCode == "13"){
            //防止冒泡
            e.preventDefault();
            //绑定点击事件
            shoot.trigger("click");
           }
    });
    
    //实时监听通讯云并获取消息数据
    danmu.on("child_added",function(data){
        
        //包装消息进弹幕用DOM
        var msgs = data.val().msg;
        var msgs_dom = "<span class='danmu-message'>" + msgs + "</span>";
        //监听获取所有消息的发射时间点
        var msgs_time_point = data.val().time;
        console.log(data.val());
        //只有在进入网站以后被发出的消息才会被显示在弹幕面板内
        if(msgs_time_point > enter_time_point){
            //插入弹幕面板
            danmu_box.prepend(msgs_dom);
            //设置初始位置
            //获取随机位置
            var position = randomNum(50,400);  
            //获取随机颜色
            var color = randomNum(100000,999999);  
            //获取随机速度
            var speed = randomNum(10000,20000);
            $('.danmu-message').first().css({
                right: '0px',
                top: position,
                color: '#' + color
            });
            //设置动画效果（位置、速度、颜色），并到位消失
            $('.danmu-message').first().animate({
                left: '0px'
            }, speed, function() {
                $(this).fadeOut();
            });
        } else {}
        
        //获取消息时间
        var msgs_time_obj = new Date(msgs_time_point);
        console.log(msgs_time_obj);
        var msgs_time = getTime(msgs_time_obj);
        console.log(msgs_time);
        //如果消息过长，则多余处用“...”代替显示
        if (msgs.length > 6) {
          msgs = msgs.substring(0, 6) + "...";
        }
        //包装消息进表格用DOM
        var msgs_table_dom = "<tr><td>" + msgs + "</td><td>" + msgs_time + "</td></tr>";
        //插入表格
        danmu_table.prepend(msgs_table_dom);
        });
        
    //清空消息（弹幕面板及通讯云）
    clear.click(function(){
        //清空通讯云
        danmu.remove();
        //清空弹幕面板
        danmu_box.empty();
        //清空表格
        danmu_table.empty();
    }); 
        
});

相关

想看源代码的童鞋可以来CODING.NET获取，也可以直接去DEMO体验一下。

---

THE END.