JS原生實現視頻彈幕Demo（仿）

時間 2019-12-10
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Js原生彈幕</title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
        * {
            margin: 0px;
            padding: 0px
        }

        html, body {
            height: 100%
        }

        body {
            overflow: hidden;
            background-color: #FFF;
            text-align: center;
        }

        .flex-column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;, align-items: center;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .wrap {
            overflow: hidden;
            width: 70%;
            height: 600px;
            margin: 100px auto;
            padding: 20px;
            background-color: transparent;
            box-shadow: 0 0 9px #222;
            border-radius: 20px;
        }

        .wrap .box {
            position: relative;
            width: 100%;
            height: 90%;
            background-color: #000000;
            border-radius: 10px
        }

        .wrap .box span {
            position: absolute;
            top: 10px;
            left: 20px;
            display: block;
            padding: 10px;
            color: #336688
        }

        .wrap .send {
            display: flex;
            width: 100%;
            height: 10%;
            background-color: #000000;
            border-radius: 8px
        }

        .wrap .send input {
            width: 40%;
            height: 60%;
            border: 0;
            outline: 0;
            border-radius: 5px 0px 0px 5px;
            box-shadow: 0px 0px 5px #d9d9d9;
            text-indent: 1em
        }

        .wrap .send .send-btn {
            width: 100px;
            height: 60%;
            background-color: #fe943b;
            color: #FFF;
            text-align: center;
            border-radius: 0px 5px 5px 0px;
            line-height: 30px;
            cursor: pointer;
        }

        .wrap .send .send-btn:hover {
            background-color: #4cacdc
        }
    </style>
</head>
<body>
<div class="wrap flex-column">
    <div class="box">
        <video src="danmu.mp4" width="100%" height="100%" controls autoplay></video>
    </div>
    <div class="send flex-row">
        <input type="text" class="con" placeholder="彈幕發送[]~(^v^)~*">
        <div class="send-btn">發送</div>
    </div>
</div>
<!-- javascript 前端中能作什麼
    1.響應用戶的操做 事件（鍵盤事件、鼠標事件）
    2.操做dom元素（增刪改查、屬性操做、樣式等）
    3.數據交互 表單驗證 ajax json jsonp 正則表達式
    4.造輪子 mvvm mvc nodeJS jquery
 -->
<!-- 需求分析
   用戶點擊發送按鈕 把input的內容展現到box裏面
   1.元素 .con .send-btn .box span（建立）
   2.事件：點擊事件 鍵盤事件
   3.行爲
       1.點擊.send-btn獲取.con的內容
           (1)規範發送信息
           (2)禁止空及全空格
           (3)存儲value值
       2.根據內容動態生成span標籤
           (1)建立節點document.createElement
           (2)改變節點內容innerHTML
           (3)節點 生成初始化位置等
           (4)標籤添加到oBox appendChild
       3.message運動
           (1)改變元素的left值
           (2)定時器改變 setInterval
           (3)this表明當前彈幕
           (4)彈幕left = 當前left-1
       4.隨機函數
           Math.random 0-1 包括0但不包括1
           (1)top
           (2)color
           (3)fontsize
           (4)textShadow
           (5)timing運動曲線
               linear
               ease-out
       5.業務完善
           (1)過去的刪除掉
               中止計時器
               刪除自身
               終止函數
           (2)完善回車輸入
               在oCon上回車 發送彈幕
 -->
<script src="jquery.min.js" type="text/javascript"></script>
<script>
    //1.獲取元素
    var oBox = document.querySelector('.box');   //獲取.box元素
    var oCon = document.querySelector('.con');   //獲取input框
    var oBtn = document.querySelector('.send-btn');   //獲取發送按鈕
    var cW = oBox.offsetWidth;   //獲取box的寬度
    var cH = oBox.offsetHeight;   //獲取box的高度
    var message = '';   //彈幕內容初始化
    oBtn.onclick = send;   //點擊發送
    oCon.onkeydown = function (e) {
        e = e || window.event;
        if (e.keyCode === 13) {
            //回車鍵
            send();
        }
    };
    function send() {
        //獲取oCon的內容
        if (oCon.value.length <= 0 || (/^\s+$/).test(oCon.value)) {
            alert('請輸入彈幕');
            return false;
        }
        message = oCon.value;
        console.log(message);
        //生成標籤
        createEle(message);   //執行節點建立模塊
        oCon.value = '';   //收尾工做清空輸入框
    }
    function createEle(txt) {
        //動態生成span標籤
        var oMessage = document.createElement('span');   //建立標籤
        oMessage.innerHTML = txt;   //接收參數txt而且生成替換內容
        oMessage.style.left = cW + 'px';  //初始化生成位置x
        oBox.appendChild(oMessage);   //把標籤塞到oBox裏面
        roll.call(oMessage, {
            //call改變函數內部this的指向
            timing: ['linear', 'ease-out'][~~(Math.random() * 2)],
            color: '#' + (~~(Math.random() * (1 << 24))).toString(16),
            top: random(0, cH),
            fontSize: random(16, 32)
        });
    }
    function roll(opt) {
        //彈幕滾動
        //若是對象中不存在timing 初始化
        opt.timing = opt.timing || 'linear';
        opt.color = opt.color || '#fff';
        opt.top = opt.top || 0;
        opt.fontSize = opt.fontSize || 16;
        this._left = parseInt(this.offsetLeft);   //獲取當前left的值
        this.style.color = opt.color;   //初始化顏色
        this.style.top = opt.top + 'px';
        this.style.fontSize = opt.fontSize + 'px';
        this.timer = setInterval(function () {
            if (this._left <= 100) {
                clearInterval(this.timer);   //終止定時器
                this.parentNode.removeChild(this);
                return;   //終止函數
            }
            switch (opt.timing) {
                case 'linear':   //若是勻速
                    this._left += -2;
                    break;
                case 'ease-out':   //
                    this._left += (0 - this._left) * .01;
                    break;
            }
            this.style.left = this._left + 'px';
        }.bind(this), 1000 / 60);
    }
    function random(start, end) {
        //隨機數封裝
        return start + ~~(Math.random() * (end - start));
    }
    var aLi = document.querySelectorAll('li');   //10

    function forEach(ele, cb) {
        for (var i = 0, len = aLi.length; i < len; i++) {
            cb && cb(ele[i], i);
        }
    }
    forEach(aLi, function (ele, i) {
        ele.style.left = i * 100 + 'px';
    });
    //產生閉包
    var obj = {
        num: 1,
        add: function () {
            this.num++;   //obj.num = 2;
            (function () {
                console.log(this.num);
            })
        }
    };
    obj.add();  //window
</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。