摘要：從零代碼開始，10分鍾快速開發一個可以發送彈幕的網站，並將其部署在華為雲服務器上；學完本期教程，將知道如何使用Nginx、如何將自己的網站部署到雲服務器上。
直播相信大家都不陌生了吧，大家經常會到游戲、淘寶等各種明星大神的直播間觀看。而一談到直播，肯定會看到滿屏幕飄來飄去的彈幕。作為程序員首先想到的問題是，這些彈幕網站開發困難嗎？我想說，真的 so easy!B站UP主-神奇的老黃今天就從零代碼開始，教大家10分鍾快速開發一個可以發送彈幕的網站。還等什么呢，動起來吧~~
開發思路
首先是讓彈幕的隨機高度出現，這個計算方法是：最大高度=屏幕的高度-發送div的高度-彈幕本身的高度，范圍就是 0-最大高度了，彈幕總是從右往左移動，所以出現最右側的位置計算方法是：最右側位置=屏幕的寬度-彈幕本身的寬度；接下來就是設置隨機顏色，顏色按照‘#aabbcc’這種格式，利用Math.random()隨機數生成；最后是彈幕的發送，首先是獲取輸入框中的值，然后新創建一個div，並設置隨機顏色、位置等屬性，調用init() 函數。
總結如下步驟：
1、獲取彈幕對象：隨機高度、初始化顏色
2、水平期間設置范圍：瀏覽器寬度-彈幕對象的高度
3、移動功能函數:定時器 setInterval
4、實現用戶發表彈幕
用到的知識點
1、首先頁面搭建，就是這些東西是如何擺放的——html+css布局
2、彈幕字體的位置和樣色設置——css樣式
3、可以輸入文字然后點擊可以發送彈幕——按鈕的點擊事件
4、字體可以旋轉——css動畫
5、彈幕字體可以從右往左滑動——js控制字體對象的style屬性
代碼塊
style代碼
<style type="text/css"> * { margin: 0; padding: 0; } .screen { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .send { width: 100%; height: 76px; background: #333; position: absolute; bottom: 0; left: 0; text-align: center; line-height: 76px; } .send .s_txt { width: 600px; height: 36px; border: 0; border-radius: 3px 0 0 3px; font-size: 16px; line-height: 36px; } .send .s_sub { width: 100px; height: 37px; background: #65c33d; border: 0; font-size: 14px; color: #fff; border-radius: 0 3px 3px 0; cursor: pointer; } .send .s_sub:hover { background: #3eaf0e; } .screen div { position: absolute; top: 76px; left: 0; font-size: 22px; color: red; } .magictime { animation-duration: 1s; animation-name: magictime; } @keyframes magictime { 0% { opacity: 0; transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: scale(1, 1) rotate(0deg) translateY(0); } } </style>
彈幕滾動div代碼
<div class="screen"> <div>這是一條彈幕！</div> <div>這是另一條彈幕！</div> <div>老黃最帥~~~</div> <div>沒錯，這又是一條彈幕！</div> <div>這里都是彈幕</div> <div>前方高能！！！</div> </div>
發送彈幕div代碼
<div class="send"> <input type="text" class="s_txt" /> <input type="button" id="send_sub" value="發表評論" class="s_sub" /> </div>
javascript邏輯代碼
<script> var oShowList = document.querySelectorAll('.screen div') var oShow = document.querySelector('.screen') var oSend = document.querySelector('.send') var oText = document.querySelector('.s_txt') var oBtn = document.querySelector('#send_sub') oBtn.onclick = function () { var oDiv = document.createElement('div') oDiv.innerHTML = oText.value; oDiv.className = 'magictime'; oShow.appendChild(oDiv) init(oDiv) oText.value = '' } for (var i = 0; i < oShowList.length; i++) { init(oShowList); } function init(obj) { var screenHeight = document.documentElement.clientHeight;//獲取瀏覽器高度 var screenWidth = document.documentElement.clientWidth;//獲取瀏覽器寬度 var sendHeight = oSend.clientHeight; var maxTop = screenHeight - sendHeight - obj.clientHeight; var maxLeft = screenWidth - obj.clientWidth; obj.style.top = Math.random() * maxTop + 'px' obj.style.left = maxLeft + 'px' obj.style.color = randomColor() move(obj, maxLeft) } function randomColor() { var color = '#'; for (var i = 0; i < 6; i++) { color += Math.floor(Math.random() * 16).toString(16) } return color; } function move(obj, maxLeft) { maxLeft -= 3; if (maxLeft > -obj.clientWidth) { obj.style.left = maxLeft + 'px' requestAnimationFrame(function () { move(obj, maxLeft) }); } else { oShow.removeChild(obj) } } </script>
安裝部署
首先領取一個月的免費服務器，如果通過我這里注冊，還可以領取200元的代金券，可多購買兩個月的服務器領取地址，然后系統選擇Ubuntu 18.04 server 64bit，設置密碼，領取后按照以下步驟初始化：
首先修改一下安全組，點擊控制台-彈性雲服務器，點擊實例名字
點擊安全組-更改安全組
添加以下端口配置
在網頁上遠程登錄
也可以通過xshell登錄，用戶名為root，密碼為之前設置的，如果忘了可以選擇重置系統
安裝nginx
更新一下系統 apt-get update # 安裝： apt-get install nginx # 安裝上傳工具 apt install lrzsz
配置nginx
# 上傳彈幕的文件 cd /var/www/htm/ rz # 選取彈幕網頁文件 index.html，可在附件下載 # 啟動： nginx -c /etc/nginx/nginx.conf # 訪問 訪問自己的公網IP即可，老黃的是 http://124.70.138.209/
開發視頻
好啦，最后在附上相關素材，以上就是開發一個可以發送彈幕網站的完整過程了，怎么樣學會了嗎？沒學會，那就重新再看一遍吧~~~~
大家還可以免費學習WEB前端全棧教程，各位小伙伴們一起來學習吧~，傳送門--->WEB前端全棧成長計划