本文介绍如何使用原生JavaScript实现一个简易的视频弹幕系统。通过封装HTML5视频控件、CSS样式布局以及JS逻辑函数，实现弹幕的随机颜色、大小、位置生成及滚动效果。包含完整的静态页面构建、CSS美化及JS核心逻辑代码，适合前端初学者参考学习。
本文分享了一段使用原生JavaScript实现弹幕效果的完整代码示例，供读者参考学习。
实现思路
第一步，搭建静态页面的基本框架结构。
<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>第二步，编写基础的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;
}完成上述步骤后，一个简单的静态页面即告完成，接下来我们将重点编写JavaScript代码。
第三步，封装几个常用的辅助函数，以便在后续逻辑中重复调用。
//随机生成一种颜色
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标签内，通过CSS定位（子绝父相）将其放置在#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)//觉得速度太慢可以在这调整
}第四步，在封装好相关函数后，开始调用这些函数以实现具体功能。
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>以上就是本文的全部内容，希望对大家的学习有所帮助，也欢迎大家继续支持本站。