不過(guò)我個(gè)人還是比較排斥看電視的時(shí)候被出來(lái)的彈幕打擾。今天我們來(lái)寫(xiě)一個(gè)簡(jiǎn)單的彈幕。簡(jiǎn)單到什么程度呢？看下效果： 

由圖可以看出，我們的呆毛html結(jié)構(gòu)確實(shí)是非常簡(jiǎn)單啦。
就是由一個(gè)div、一個(gè)input框另加一個(gè)button組成。

<div id="box" class="box"></div> <input type="text" id="txt" /> <button onclick="send()">提交內(nèi)容</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'; } }

原理簡(jiǎn)單說(shuō)下：

第一步，我們要拿到input框里面的內(nèi)容，var word = $('txt').value;
第二步，我們就要把這個(gè)內(nèi)容想方設(shè)法地塞到要滾動(dòng)顯示的div里面去了，原則有三：①顏色隨機(jī)②高度隨機(jī)③與左邊框的距離實(shí)時(shí)變化；
第三步，把這個(gè)內(nèi)容追加到div里  $('box').appendChild(span);

由上述步驟原理可以看出，第二步是最關(guān)鍵的一步，

實(shí)現(xiàn)第一個(gè)原則：

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)該是很容易理解了。

實(shí)現(xiàn)第二個(gè)原則：

var top = parseInt(Math.random() * 500) - 20; top = top < 0 ? 0 : top; span.style.top = top + "px";

實(shí)現(xiàn)第三個(gè)原則：

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'; } }

就是利用了定時(shí)器的原理，讓left的值實(shí)時(shí)變化。