javaScript视频弹幕

视频弹幕

<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>

效果图