简单实现JavaScript弹幕效果


Posted in Javascript onAugust 27, 2020

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
微信小程序实现简单表格
Feb 14 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 #Javascript
详解webpack打包vue时提取css
May 26 #Javascript
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 #jQuery
Angular2 之 路由与导航详细介绍
May 26 #Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 #Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
python批量修改图片大小的方法
2018/07/24 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Python换行与不换行的输出实例
2020/02/19 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
大学生毕业求职信
2014/06/12 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
导游词400字
2015/02/13 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
证婚人致辞精选
2015/07/28 职场文书
离婚民事起诉状
2015/08/03 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python