js实现简易弹幕系统
本文实例为大家分享了原生js实现弹幕效果的具体代码，供大家参考，具体内容如下
实现思路
1、先写好静态页面框架
<div id='father'>
<div id="top">
<video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video>
<!-- controls显示标准的视频控件 autoplay 视频自动播放（只有设置了muted属性才能自动播放）
muted静音播放 loop 循环播放-->
</div>
<div id="bottom">
<input type="text" id="txt">
<input type="button" id="btn" value="发送">
</div>
</div>
2、给简单的css代码让页面美观一点
*{
/*页面初始化*/
margin: 0;
padding: 0;
}
body{
background-color: burlywood;
}
#father{
width: 800px;
height: 550px;
margin: 50px auto;
}
#top{
width: 800px;
height: 500px;
}
video{
width: 800px;
height: 500px;
}
#bottom{
width: 800px;
height: 50px;
background-color: #000;
text-align: center;
line-height: 50px;
}
这样一个简单的静态页面就完成了，剩下的我们就来写JS代码。
3、我们先来封装几个函数来方便后面使用。
//随机生成一种颜色
function rgb (){
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return 'rgb('+r+','+g+','+b+')'
}
//生成指定范围的数据整数
function stochastic(max,min){
return Math.floor(Math.random()*(max-min)+min);
}
我们发送的弹幕放在span标签中，这里我们要用定位将span放在#top中（子绝父相）
//在<div id='#top'></div>添加span标签
function barrage(){
let span = document.createElement("span");
span.innerHTML = txt.value;
span.style.color = rgb(); //弹幕颜色
span.style.fontSize = stochastic(50,12) + 'px'; //字体大小
span.style.top = stochastic(420,0) +'px'; //出现位置
let right = -2000
span.style.right = right + 'px' //距离右边的距离
tops.appendChild(span); //在<div id='#top'></div>添加span标签
//通过计时器来实现弹幕的移动
let tiem = setInterval(()=>{
right++;
span.style.right = right + 'px'
if( right > 800){
tops.removeChild(span); //当弹幕移动出了视频时，直接销毁该元素
clearInterval(tiem); //关闭计时器
}
},10)//觉得速度太慢可以在这调整
}
4、封装好了函数，现在就来调用
let btn = document.getElementById('btn');
//给按钮添加点击事件
btn.onclick = ()=>{
if(txt.value=='') return; //当用户输入为空时直接返回
barrage();
txt.value = ''; //清空input框
}
//添加一个键盘的监听事件（回车）
document.addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
if(txt.value=='') return;
barrage();
txt.value = '';
}
});
最后附上全部代码，希望对你有所帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js弹幕效果</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: burlywood;
}
#father{
width: 800px;
height: 550px;
margin: 50px auto;
}
#top{
width: 800px;
height: 500px;
position: relative;
overflow:hidden; /*溢出隐藏*/
}
video{
width: 800px;
height: 500px;
object-fit:fill; /*适应指定容器的高度与宽度*/
}
#bottom{
width: 800px;
height: 50px;
background-color: #000;
text-align: center;
line-height: 50px;
}
span{
position: absolute;
right: 0;
top:0;
}
</style>
</head>
<body>
<div id='father'>
<div id="top">
<video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video>
</div>
<div id="bottom">
<input type="text" id="txt">
<input type="button" id="btn" value="发送">
</div>
</div>
<script>
let txt = document.getElementById('txt');
let btn = document.getElementById('btn');
let tops = document.getElementById('top');
//给按钮添加点击事件
btn.onclick = ()=>{
if(txt.value=='') return; //当用户输入为空时直接返回
barrage();
txt.value = ''; //清空input框
}
//添加一个键盘的监听事件（回车）
document.addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
if(txt.value=='') return; //当用户输入为空时直接返回
barrage();
txt.value = ''; //清空input框
}
});
//随机生成一种颜色
function rgb (){
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return 'rgb('+r+','+g+','+b+')'
}
//生成指定范围的数据整数
function stochastic(max,min){
return Math.floor(Math.random()*(max-min)+min);
}
//在<div id='#top'></div>添加span标签
function barrage(){
let span = document.createElement("span");
span.innerHTML = txt.value;
span.style.color = rgb();
span.style.fontSize = stochastic(50,12) + 'px';
span.style.top = stochastic(420,0) +'px';
span.style.right = -200 + 'px';
tops.appendChild(span);
let right = -200;
let tiem = setInterval(()=>{
right++;
span.style.right = right + 'px'
if( right > 800){
tops.removeChild(span); //当弹幕移动出了视频时，销毁该元素
clearInterval(tiem); //关闭计时器
}
},10)//觉得速度太慢可以在这调整
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JS实现弹幕效果的简单操作指南
前言 现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果,那么如何用JS实现这样的效果呢,用一个初学者的方法记录下这个方法,欢迎大牛指导. 1.首先需要操作文档必须拿到Dom中的元素,当然有很多方法,这里还是用document.querySelector. 2.这边也是为了键盘和鼠标都可发送封装了一个函数function sendMsg(){ 首先需要创建一个容器来接受你编辑的内容,这里用span标签,当然其他标签也可 var oSpan=document.cerateElement
-
原生js实现弹幕效果
本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生js实现弹幕效果</title> <style> * { padding:0; margin:0; } .all { width:600px; height:400px; backgr
-
js cavans实现静态滚动弹幕
本文实例为大家分享了js实现静态滚动弹幕的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 弹幕文字 --> <div class="video-
-
JavaScript直播评论发弹幕切图功能点集合效果代码
一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
-
基于JavaScript实现弹幕特效
本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下 此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&
-
javascript实现视频弹幕效果（两个版本）
本文实例为大家分享了javascript实现视频弹幕效果的具体代码,供大家参考,具体内容如下 基础版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color:
-
js实现弹幕飞机效果
本文实例为大家分享了js实现弹幕飞机效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ width: 70vw;/*长宽最好是obj的倍数*/ height: 90vh; border-width:
-
JS实现的视频弹幕效果示例
本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼
-
简单实现JavaScript弹幕效果
不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&
-
javascript实现弹幕墙效果
刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙. 步骤如下: 1.编写HTML代码: 创建一个弹幕显示墙,以及两个按钮,分别为"发送"和"清屏",并在文本框中设置placeholder为"说点什么吧?"以提示用户在此输入弹幕信息. <body> <div class="con"> <div id="screen"> <div class=