javaScript视频弹幕

太过爱你忘了你带给我的痛 2022-01-16 02:11 513阅读 0赞

## 视频弹幕 ##

<script type="text/javascript">
    		function $(str){return document.getElementById(str);}
    		function send(){
    			var content = $('txt').value;  //txt的value值
    			var span = document.createElement('span'); //创建一个span标签
    			//在div标签中追加一个子节点
    			$('box').appendChild(span);
    			//把我们文本框中的内容追加到我们创建的子节点中
    			span.innerHTML = content;
    			//设置弹幕随机颜色  rgb调色
    			var hue1 = parseInt(Math.random()*200);
    			var hue2 = parseInt(Math.random()*200);
    			var hue3 = parseInt(Math.random()*200);
    			var hue = 'rgb('+hue1+','+hue2+','+hue3+')';
    			//随机设置弹幕高度
    			var top = parseInt(Math.random()*200)-20;
    			top = top < 0 ? 0 : top;
    			//设置弹幕开始出现的位置
    			span.style.position = 'absolute';
    			span.style.top = top+'px';
    			span.style.left = '1000px';
    			span.style.fontSize = '20px';
    			//弹幕字的随机颜色
    			span.style.color = hue;
    			//检测提交的内容是否为空
    			if($('txt').value.length<1){
    				alert('请你输入内容后再提交');
    			}
    			//在执行结束后清空text文本框
    			$('txt').value = '';	
    			//span的随机速度
    			var num = parseInt(Math.random()*200);
    			span.setAttribute('speed',num);
    			span.speed = num;
    		}
    		//定义一个运动函数
    		function move(){
    			var spanarr = $('box').children; //获取父节点中的所有子节点
    			for(var i=0;i<spanarr.length;i++){
    		             if(spanarr[i].style.left<0+'px'){
    					$('box').removeChild(spanarr[i]);
    				}
    				spanarr[i].style.left=parseInt(spanarr[i].style.left)-spanarr[i].speed + 'px';
    			}
    		}
    		setInterval(move,200);
    	</script>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220115/553e28cd739247349ad87157c74559f9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，513人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript简单的弹幕

弹幕首先是弹幕的位置，是要从最右滑到最左，为了防止随机高度弹幕会覆盖的问题，设置了通道。每一个通道是从左到右的一条，高度固定，这样不同通道的弹幕不会相互覆盖

男娘i/ 2023年06月02日 07:55/ 0 赞/ 173 阅读

相关 JavaScript 简单的弹幕功能的实现

在视频网站看视频的时候，经常能看到弹幕，某个时间段弹幕数超级多，某个时间段几乎没有，我们可以实时新增弹幕并且能实时出现在弹幕群中。再次进入该视频后，会发现之前添加的弹幕还

叁歲伎倆/ 2023年03月14日 08:23/ 0 赞/ 20 阅读

相关 php+js实现弹幕,基于HTML5的有弹幕功能的视频播放器

如何使用 Danmmu Player需要依赖jQuery，因此首先需要加入相关css和js文件。接下来，在body中需要放置播放器的位置加入如下代码：最后，关键的部分

客官°小女子只卖身不卖艺/ 2023年01月16日 09:42/ 0 赞/ 304 阅读

相关原生 JS 实现视频弹幕功能

![在这里插入图片描述][20201119213110775.gif_pic_center] 效果还行吧，大概就不到 150 行代码即可。快点学起来吧 ![在这里插入图

悠悠/ 2022年12月22日 11:11/ 0 赞/ 356 阅读

相关 Python爬虫：AcFun弹幕视频网

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迈不过友情╰/ 2022年12月15日 12:49/ 0 赞/ 289 阅读

相关用Python爬取B站视频弹幕

via：菜J学Python 众所周知，弹幕，即在网络上观看视频时弹出的评论性字幕。不知道大家看视频的时候会不会点开弹幕，于我而言，弹幕是视频内容的良好补充，是一个组织良好的评

快来打我*/ 2022年12月15日 11:10/ 0 赞/ 536 阅读

相关如何爬取B站视频弹幕

目录所需Python库爬取视频名称和UP主信息爬取弹幕信息完整代码所需Python库 `re`：正则表达式模块。 `

柔情只为你懂/ 2022年11月15日 11:43/ 0 赞/ 608 阅读

相关爬取b站热门视频的弹幕，并进行弹幕分析

一、B站弹幕分析 B站弹幕数据存放在https://comment.bilibili.com/cid.xml中，其中cid是视频的cid号，获取需要爬取的视频的cid号的

电玩女神/ 2022年11月14日 10:09/ 0 赞/ 599 阅读

相关 Java 版视频弹幕交互功能

2021年了，还有不支持弹幕的视频网站吗，现在各种弹幕玩法层出不穷，抽奖，ppt都上弹幕玩法了，不整个弹幕都说不过去了，今天笔者就抽空做了一个实时视频弹幕交互功能的实现，不得不

今天药忘吃喽~/ 2022年08月28日 01:54/ 0 赞/ 373 阅读

相关 javaScript视频弹幕

视频弹幕 <script type="text/javascript"> function $(str){return document.getEle

太过爱你忘了你带给我的痛/ 2022年01月16日 02:11/ 0 赞/ 514 阅读