實現一個彈幕app

最後更新：2017-10-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：text 處理 guide obj 同步 empty put animate 即時

功能：發射彈幕，清空彈幕，實現彈幕動畫

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More