JavaScript弹幕效果的简单实现

不知道你有没有感觉，弹幕又是一场好戏！不过我个人比较喜欢看电视的时候不被弹幕打扰。今天我们就写一个简单的弹幕。有多简单？看效果：

从图中可以看出，我们愚蠢的html结构真的非常简单。由一个div、一个输入框和一个按钮组成。

Div id=' box' class=' box'/div输入类型=' text ' id=' txt '/button onclick=' send()'提交内容/button第一个po js代码：

函数$(str){ return document . getelementbyid(str)；}函数send() { var word=$('txt ')。价值；var span=document . create element(' span ')；var top=parsent(math . random()* 500)-20；var color 1=parsent(math . random()* 256)；var color 2=parsent(math . random()* 256)；var color 3=parsent(math . random()* 256)；var color='rgb(' color1 '，' color2 '，' color 3 ')'；top=top 0？0 :顶；span.style.position='绝对'；span . style . top=top ' px '；span . style . color=color；span . style . left=' 500 px '；span.style .空白=' nowrapvar nub=(math . random()* 10)1；span.setAttribute('speed '，nub)；速度=小块；span.innerHTML=word$('box ')。appendChild(span)；$('txt ')。值=' '；} setInterval(move，200)；函数move() { var spanArray=$('box ')。儿童；for(var I=0；i spanArray.lengthI){ SPan array[I]. style . left=ParSeint(SPan array[I]. style . left)-SPan array[I]。速度‘px’；}}原理很简单的说：

第一步是获取输入框中的内容，var word=$('txt ')。价值；在第二步中，我们必须尽最大努力将这些内容插入要滚动的div中。有三个原则：随机颜色，随机高度，距左边框距离的实时变化；第三步是将此内容追加到div $(“box”)中。appendChild(span)；

从上述步骤的原理可以看出，第二步是最关键的一步。

实现第一个原则：

var color 1=parsent(math . random()* 256)；var color 2=parsent(math . random()* 256)；var color 3=parsent(math . random()* 256)；var color='rgb(' color1 '，' color2 '，' color 3 ')'；span . style . color=color；小型扩展：

RGB(R，G，B)；r:红色值。正整数|百分比g:绿色值。正整数|百分比b:蓝色值。正整数|百分比，所以应该很容易理解。

实现第二个原则：

var top=parsent(math . random()* 500)-20；top=top 0？0 :顶；span . style . top=top ' px '；实现第三个原则：

span . style . left=' 500 px '；setInterval(移动，200)；函数move() { var spanArray=$('box ')。儿童；for(var I=0；i spanArray.lengthI){ SPan array[I]. style . left=ParSeint(SPan array[I]. style . left)-SPan array[I]。速度‘px’；}}是利用定时器的原理使左的值实时变化。

在这一点上，应该很清楚。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。