时间：2022-12-06 02:01
js实现弹幕功能的方法：1、创建html文件；2、添加html代码架构；3、在body标签中使用div、input、button标签分给页面设计效果显示框、输入框、弹幕提交按钮；4、添加script标签并写入js代码来实现弹幕效果；5、通过浏览器方式查看设计效果。
具体操作方法：
1.首先创建一个html文件。
2.在html文件中添加html代码架构。
<!DOCTYPEhtml><html>
<head>
<metacharset="UTF-8">
<title>弹幕功能</title>
</head>
<body>
</body>
</html>
3.然后在html代码架构中的body标签里面使用div、input、button标签分别给页面设计一个效果显示框、输入框、弹幕提交按钮。
<divid="box"class="box"></div><inputtype="text"id="txt"/>
<buttononclick="send()">发送弹幕</button>
4.在html架构中的html标签里面添加script标签并写入js代码来实现弹幕效果。
<style>function$(str){
returndocument.getElementById(str);
}
functionsend(){
varword=$('txt').value;
varspan=document.createElement('span');
vartop=parseInt(Math.random()*500)-20;
varcolor1=parseInt(Math.random()*256);
varcolor2=parseInt(Math.random()*256);
varcolor3=parseInt(Math.random()*256);
varcolor="rgb("+color1+","+color2+","+color3+")";
top=top<0?0:top;
span.style.position='absolute';
span.style.top=top+"px";
span.style.color=color;
span.style.left='500px';
span.style.whiteSpace='nowrap';
varnub=(Math.random()*10)+1;
span.setAttribute('speed',nub);
span.speed=nub;
span.innerHTML=word;
$('box').appendChild(span);
$('txt').value="";
}
setInterval(move,200);
functionmove(){
varspanArray=$('box').children;
for(vari=0;i<spanArray.length;i++){
spanArray[i].style.left=parseInt(spanArray[i].style.left)-spanArray[i].speed+'px';
}
}
</style>
5.最后可通过浏览器方式阅读html文件查看设计效果。
完整示例代码如下：
<!DOCTYPEhtml><html>
<head>
<metacharset="UTF-8">
<title>弹幕功能</title>
</head>
<body>
<divid="box"class="box"></div>
<inputtype="text"id="txt"/>
<buttononclick="send()">发送弹幕</button>
</body>
<script>
function$(str){
returndocument.getElementById(str);
}
functionsend(){
varword=$('txt').value;
varspan=document.createElement('span');
vartop=parseInt(Math.random()*500)-20;
varcolor1=parseInt(Math.random()*256);
varcolor2=parseInt(Math.random()*256);
varcolor3=parseInt(Math.random()*256);
varcolor="rgb("+color1+","+color2+","+color3+")";
top=top<0?0:top;
span.style.position='absolute';
span.style.top=top+"px";
span.style.color=color;
span.style.left='500px';
span.style.whiteSpace='nowrap';
varnub=(Math.random()*10)+1;
span.setAttribute('speed',nub);
span.speed=nub;
span.innerHTML=word;
$('box').appendChild(span);
$('txt').value="";
}
setInterval(move,200);
functionmove(){
varspanArray=$('box').children;
for(vari=0;i<spanArray.length;i++){
spanArray[i].style.left=parseInt(spanArray[i].style.left)-spanArray[i].speed+'px';
}
}
</script>
</html>
