js实现弹幕功能

最新推荐文章于 2025-03-13 14:41:20 发布

monikaH

最新推荐文章于 2025-03-13 14:41:20 发布

阅读量3.9k

点赞数

分类专栏： JavaScript 文章标签： js弹幕

本文链接：https://blog.csdn.net/qq_40072782/article/details/82943028

版权

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

要点：

布局：输入框、提交按钮、弹幕区域
创建弹幕，并获取到它的相关属性，如颜色。。。。
弹幕的颜色随机
高度随机
距离左边边框距离，实时变化（难点）
弹幕文字不换行（white-space：nowrap）
我能想到的大概就这么多吧。附上完整代码，代码注释解释得差不多了，

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style type="text/css">
	#box{
		width: 500px;
		height: 500px;
		border:2px solid red;
	}

</style>
<body>
<p id="box" class="box"></p>
<input type="text" id="txt" />
<button onclick="send()">提交内容</button>

<script type="text/javascript">
function $(str) {  //这个方法的参数为一个str，然后返回一个id为str的控件对象
 return document.getElementById(str);
}
function send() {
 var word = $('txt').value; //我们要拿到input框里面的内容  $('text')相当于getElementById
 var span = document.createElement('span');
 var top = parseInt(Math.random() * 500) - 20;  //②高度随机
 var color1 = parseInt(Math.random() * 256); // ①颜色随机 每种颜色有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;//yanse
 span.style.left = '500px';  //③与左边框的距离；
 span.style.whiteSpace = 'nowrap';  //文本不进行换行
 var nub = (Math.random() * 100) + 1;
 span.setAttribute('speed', nub);   //setAttribute就是给span添加了一个speed的属性，值为nub 随机速度;
 span.speed = nub;
 span.innerHTML = word; //innerHTML在JS：①获取对象的内容$('x').innerHTML 或 ②向对象插入内容(此处是插入)；
 $('box').appendChild(span);  //把span内容追加到p里 
 $('txt').value = "";  //提交后清除输入框的文字
}
setInterval(move, 200);//③起，setInterval要求第一个参数必须是含Javascript命令的字符串或函数对象。
//move()和move是不相同的，move()是语句，表示要立即执行这个函数的意思；move则是一个函数对象，代表了这个函数本身，本身是不会运行的，可以把它赋值给其他对象或作为其他函数的参数。
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';//与左边框的距离实时变化；③止
 }
}
</script>
</body>
</html>

懒得传动图，静态图将就着看一下
移动的速度也不一样
在这里插入图片描述