本文实例讲述了js实现的视频弹幕效果。分享给大家供大家参考，具体如下：
我要评论
<!doctype html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>斗鱼弹幕</title>
<style>
html,body{font-size:10px;overflow:hidden;margin:0;padding:0;}
#box{width:100%;height:100%;}
#dm{width:100%;height:90vh;background:#e8f1f5;}
#dm span{width:auto;height:3rem;font-size:2rem;line-height:2rem;position:absolute;white-space:nowrap;}
#iddom{width:100%;height:10vh;background:#666;position:absolute;bottom:0;display:flex;align-items:center;justify-content:center;}
#content{width:50rem;height:10vh;display:flex;align-items:center;justify-content:center;}
.title{font-size:2.2px rein;color:#fff;line-height:#ccc;}
.text{width:30rem;height:2.5rem;border:none;border-radius:.5rem;font-size:1.4rem;margin:0 .5rem;padding:0 1rem;}
.btn{width:6rem;height:3rem;border:none;background:red;color:#fff;}
</style>
</head>
<body>
<div class="box" id="box">
<div id="dm"></div>
<div class="iddom" id="iddom">
<div id="content">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text" placeholder="请输入你想说的话" />
<button type="button" class="btn" id="btn">发射!</button>
</div>
</div>
</div>
<script langugae="javascript">
var timer;
var btn = document.getelementbyid('btn');
btn.onclick = function() { addbarrage();}
document.onkeydown = function(evt) {var event = evt || window.event;if (event.keycode == 13) {addbarrage();}}
var colors = ['#2c3e50', '#ff0000', '#1e87f0', '#7ac84b', '#ff7f00', '#9b39f4', '#ff69b4'];//弹幕颜色库
function addbarrage() {
clearinterval(timer);
var text = document.getelementbyid('text').value;
document.getelementbyid('text').value = "";
var index = parseint(math.random() * colors.length); //随机弹幕颜色
var screenw = window.innerwidth;
var screenh = dm.offsetheight;
var max = math.floor(screenh / 40);
var height = 10 + 40 * (parseint(math.random() * (max + 1)) - 1);
var span = document.createelement('span');
span.style.left = screenw + 'px';
span.style.top = height + 'px';
span.style.color = colors[index];
span.innerhtml = text;
var dmdom = document.getelementbyid('dm');
dmdom.appendchild(span);
timer = setinterval(move, 10);
}
function move() {
var arr=[];
var ospan=document.getelementsbytagname('span');
for(var i=0;i<ospan.length;i++){
arr.push(ospan[i].offsetleft);
arr[i] -= 2;
ospan[i].style.left = arr[i]+'px';
if(arr[i]<-ospan[i].offsetwidth){
var dmdom=document.getelementbyid('dm');
dmdom.removechild(dmdom.childnodes[0]);
}
}
}
</script>
</body>
</html>
运行效果如下图所示：
感兴趣的朋友可以使用在线html/css/javascript代码运行工具：，测试代码运行效果。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript动画特效与技巧汇总》、《javascript页面元素操作技巧总结》、《javascript运动效果与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
javascript从入门到跑路-----小文的js学习笔记（19）------- js的垃圾回收机制
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景
网友评论