摘要：從零代碼開始，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前端全棧成長計劃

?

點擊這里→了解更多精彩內容

?

相關推薦

網站的基本設置

快速搭建網站之云速建站

讓你輕輕松松建立屬于自己的網店

按照給定模板從0開始編輯網站頁面

總結

以上是生活随笔為你收集整理的【华为云技术分享】10分钟快速在华为云鲲鹏弹性云服务器上部署一个自己的弹幕网站！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。