開發思路

首先是讓彈幕的隨機高度出現，這個計算方法是：最大高度=屏幕的高度-發送div的高度-彈幕本身的高度，范圍就是 0-最大高度了，彈幕總是從右往左移動，所以出現最右側的位置計算方法是：最右側位置=屏幕的寬度-彈幕本身的寬度；接下來就是設置隨機顏色，顏色按照‘#aabbcc’這種格式，利用Math.random()隨機數生成；最后是彈幕的發送，首先是獲取輸入框中的值，然后新創建一個div，并設置隨機顏色、位置等屬性，調用init() 函數。

總結如下步驟：

1、獲取彈幕對象：隨機高度、初始化顏色

2、水平期間設置范圍：瀏覽器寬度-彈幕對象的高度

3、移動功能函數:定時器 setInterval

4、實現用戶發表彈幕

用到的知識點

1、首先頁面搭建，就是這些東西是如何擺放的——html+css布局

2、彈幕字體的位置和樣色設置——css樣式

3、可以輸入文字然后點擊可以發送彈幕——按鈕的點擊事件

4、字體可以旋轉——css動畫

5、彈幕字體可以從右往左滑動——js控制字體對象的style屬性

代碼塊

style代碼

*?{

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);

}

}

彈幕滾動div代碼

這是一條彈幕！這是另一條彈幕！老黃最帥~~~沒錯，這又是一條彈幕！這里都是彈幕前方高能！！！

發送彈幕div代碼

1234

javascript邏輯代碼

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?

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?

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)

}

}

安裝部署

首先領取一個月的免費服務器，如果通過我這里注冊，還可以領取200元的代金券，可多購買兩個月的服務器??領域地址?，然后系統選擇Ubuntu 18.04 server 64bit，設置密碼，領取后按照一下步驟初始化：

修改一下安全組，點擊安全組，更改安全組，把入方向的勾選上

登錄

也可以通過xshell登錄，用戶名為root，密碼為之前設置的，如果忘了可以選擇重置系統

安裝nginx

配置nginx

好啦，以上就是開發一個可以發送彈幕網站的完整過程了，如果有什么疑問，歡迎在下面留言告訴老黃~

總結

以上是生活随笔為你收集整理的华为云部署html网页,手把手教你如何在华为云服务器上部署一个自己的弹幕网站！...的全部內容，希望文章能夠幫你解決所遇到的問題。

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