今天小編給大家分享一下怎么使用JavaScript實現(xiàn)彈幕效果的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)公司堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計、網(wǎng)站制作、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，小程序開發(fā)，軟件按需開發(fā)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
看下效果：
由圖可以看出，我們的呆毛html結(jié)構(gòu)確實是非常簡單啦。
就是由一個div、一個input框另加一個button組成。
先po上js代碼：
重慶分公司
重慶分公司
function $(str) {
return document.getElementById(str);
}
function send() {
var word = $('txt').value;
var span = document.createElement('span');
var top = parseInt(Math.random() * 500) - 20;
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
top = top < 0 ? 0 : top;
span.style.position = 'absolute';
span.style.top = top + "px";
span.style.color = color;
span.style.left = '500px';
span.style.whiteSpace = 'nowrap';
var nub = (Math.random() * 10) + 1;
span.setAttribute('speed', nub);
span.speed = nub;
span.innerHTML = word;
$('box').appendChild(span);
$('txt').value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $('box').children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left =
parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
}
}原理簡單說下：
第一步，我們要拿到input框里面的內(nèi)容，var word = $('txt').value;
第二步，我們就要把這個內(nèi)容想方設(shè)法地塞到要滾動顯示的div里面去了，原則有三：①顏色隨機(jī)②高度隨機(jī)③與左邊框的距離實時變化；
第三步，把這個內(nèi)容追加到div里 $('box').appendChild(span);
由上述步驟原理可以看出，第二步是最關(guān)鍵的一步，
實現(xiàn)第一個原則：
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
span.style.color = color;小擴(kuò)展：
RGB(R,G,B)；
R：
紅色值。正整數(shù) | 百分?jǐn)?shù)
G：
綠色值。正整數(shù) | 百分?jǐn)?shù)
B：
藍(lán)色值。正整數(shù) | 百分?jǐn)?shù)
這樣就應(yīng)該是很容易理解了。
實現(xiàn)第二個原則：
var top = parseInt(Math.random() * 500) - 20; top = top < 0 ? 0 : top; span.style.top = top + "px";
實現(xiàn)第三個原則：
span.style.left = '500px';
setInterval(move, 200);
function move() {
var spanArray = $('box').children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left =
parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
}
}就是利用了定時器的原理，讓left的值實時變化。
以上就是“怎么使用JavaScript實現(xiàn)彈幕效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
