原生JS書寫一個簡單的視頻彈幕

時間 2019-11-08

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<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>
       #sendText{
           width: 250px;
           height: 22px;
       }
    span{
        position: absolute;
        color: white;
        font-weight: bold;
    }
    </style>
</head>
<body>
   <div class="container">
        <video autoplay src="loop.mp4" width="600" height="456" controls>
            <source src="loop.mp4">
        </video>
   </div>
   <div>
       <input type="text" id="sendText" placeholder="來幾條彈幕吧~~~">
       <button id="sendBtn">發送</button>
   </div>
   <script>
      
       let video = document.getElementsByTagName("video")[0];
        let container = document.getElementsByClassName("container")[0];
        // 隨機函數 接收兩個參數 爲隨機數的起始值(必須)和結束值(可選)
        let random = function (start, end) {
           return Math.floor(Math.random() * (end - start + 1)) + start;
        }
        // 觸發事件時須要執行的回調函數
        let wordMove = function(){
            let span = document.createElement("span"); // 建立一個新的span
            span.innerHTML = sendText.value; // 將文本框中的內容賦值給這個新的span
            sendText.value = ""; // 清空文本框中的內容
            let speend = random(5, 10); // 獲取一個5-10的隨機速度
            span.style.left = video.width + "px"; // 設置新span的出場left值
            let totalHeight = video.offsetTop + video.height; // 獲取總的高度
            // 設置新span的出場top值在(video.offsetTop+10)以及(totalHeight-15)的範圍內
            span.style.top = random(video.offsetTop + 10, totalHeight - 15) + "px";
            // 將新的span添加到頁面上面去
            container.appendChild(span);
            // 開啓定時器函數
            let stopTimer = setInterval(function () {
                span.style.left = parseInt(span.style.left) - speend + "px"; // 不斷變化span的left值
                // 若是span的left值小於0 中止計時器函數 刪除span
                if (parseInt(span.style.left) < 0) {
                    clearInterval(stopTimer);
                    container.removeChild(span);
                }
            }, 50);
        }
        // 爲發送按鈕綁定點擊事件
        sendBtn.onclick = wordMove;
        // 按回車鍵也能夠觸發相應事件
        document.onkeydown = function(e){
            if(e.keyCode === 13){
                wordMove();
            }
        }
   </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。