简单实现JavaScript弹幕效果

更新时间：2020年08月27日 13:49:30 作者：AmberWu

这篇文章主要帮助大家简单实现JavaScript弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

不知大家有没有感受到，弹幕又是另一出好戏！！

不过我个人还是比较排斥看电视的时候被出来的弹幕打扰。今天我们来写一个简单的弹幕。简单到什么程度呢？看下效果：

由图可以看出，我们的呆毛html结构确实是非常简单啦。
就是由一个div、一个input框另加一个button组成。

 <div id="box" class="box"></div>
 <input type="text" id="txt" />
 <button onclick="send()">提交内容</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框里面的内容，var word = $('txt').value;
第二步，我们就要把这个内容想方设法地塞到要滚动显示的div里面去了，原则有三：①颜色随机②高度随机③与左边框的距离实时变化；
第三步，把这个内容追加到div里 $('box').appendChild(span);

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

实现第一个原则：

 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;

小扩展：

RGB(R,G,B)；
R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数
这样就应该是很容易理解了。

实现第二个原则：

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

实现第三个原则：

 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的值实时变化。

讲到这里，就应该很清晰明了了吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
弹幕

基于JavaScript代码实现随机漂浮图片广告
在网上有很多这样的代码，不过未必符合W3C标准，因为在头部加上<!DOCTYPE html>类似标签之后，漂浮效果就会失效，下面分享一个符合标准的漂浮代码，使需要的朋友免去大量改造代码的繁琐
2016-01-01
深入理解JavaScript中的浮点数
下面小编就为大家带来一篇深入理解JavaScript中的浮点数。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
JavaScript中添加监听句柄的方式
这篇文章主要介绍了JavaScript中添加监听句柄的方式，监听就是触发某事件之后做出的响应,监听句柄是触发某相应的条件，下面关于添加监听句柄的方式的详细内容，需要的朋友可以参考一下，希望对你有所帮助
2022-02-02
微信小程序授权登录的优雅处理方式
这篇文章主要给大家介绍了关于微信小程序授权登录的优雅处理方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
js实现登录时记住密码的方法分析
这篇文章主要介绍了js实现登录时记住密码的方法,结合实例形式分析了JavaScript基于cookie实现存储登录密码相关操作技巧,需要的朋友可以参考下
2020-04-04
JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
这篇文章主要介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）的相关资料,需要的朋友可以参考下
2016-02-02
微信小程序如何获取用户收货地址
这篇文章主要为大家详细介绍了微信小程序获取用户收货地址的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
20170918 前端开发周报之JS前端开发必看
本文给大家分享了最新版js 前端开发周报，内容非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-09-09
JavaScript防抖与节流详解
这篇文章主要介绍了JS中的防抖与节流及作用详解，本文通过文字说明加示例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2021-10-10
javascript验证身份证完全方法具体实现
下面这段代码完全实现了判断身份证是否合格.传入身份证号码就行了。包括了公安部的算法。下面的是用Ext实现的。但是基于javascript的语法居多，基本都可以用
2013-11-11