var subtitle = document.getElementById("subtitle");
var fire = document.getElementById("fire");
var colordict = {"bl":"#666666","r":"#ff00ff","g":"#66ff33","b":"#6633ff"}
var subtitlelist = new Array();
var subword = new Object();
var timercreated = false;
function update(t){
var subwo = document.getElementsByClassName("subword");
if (subtitlelist.length<=0 && timercreated==true)
{
clearInterval(t);
timercreated = false;
}else{
for (var i=0;i<subtitlelist.length;i++)
{
if (subtitlelist[i]["left"] < -parseInt(subwo[i].clientWidth))
{
subtitlelist.splice(i,1);
page1.removeChild(subwo[i]);
}else{
subtitlelist[i]["left"]-=3;
console.log(subtitlelist[i]["left"]);
subwo[i].style.left = subtitlelist[i]["left"]+"px";
}
}
}
}
fire.onclick = function(){
if (timercreated==false)
{
console.log(timercreated);
window.t = setInterval(update,500);
timercreated = true;
}
var colorvalue = document.getElementsByName("color");
if (subtitle.value==null||subtitle.value=="")
{
return;
}else{
if (subtitlelist.length<=50)
{
subword["word"] = subtitle.value;
for (var i=0;i<colorvalue.length;i++)
{
if (colorvalue[i].checked==true)
{
subword["color"] = colordict[colorvalue[i].value];
break;
}
}
subword["left"] = 792;
subword["top"] = parseInt(Math.random()*600)+"px";
subword["iscread"] = false;
subw = document.createElement("span");
subw.className = "subword";
subw.style.color = subword["color"];
subw.innerText = subword["word"];
subw.style.left = subword["left"]+"px";
subw.style.top = subword["top"];
page1.appendChild(subw);
subword["iscread"] = true;
subtitlelist.push(subword);
}else{
alert("弹幕是有上限的,请待会在发");
}
}
}
![图片说明](https://img-ask.csdn.net/upload/201808/03/1533302489_63655.png)
问题 1、同时发射多个弹幕(2个以上),前面的弹幕“left”会重置,回到屏幕右侧。
2、发射多个时,弹幕的速度好像会叠加。
js,模拟弹幕发射,有些bug不明白,求帮助、、、
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- 天际的海浪 2018-08-03 13:55关注
var subtitle = document.getElementById("subtitle"); var fire = document.getElementById("fire"); var colordict = {"bl":"#666666","r":"#ff00ff","g":"#66ff33","b":"#6633ff"} var subtitlelist = new Array(); //var subword = new Object(); var timercreated = false; function update(){//------------不要写t参数 var subwo = document.getElementsByClassName("subword"); if (subtitlelist.length<=0 && timercreated==true) { clearInterval(t); timercreated = false; }else{ for (var i=0;i<subtitlelist.length;i++) { if (subtitlelist[i]["left"] < -parseInt(subwo[i].clientWidth)) { subtitlelist.splice(i,1); page1.removeChild(subwo[i]); }else{ subtitlelist[i]["left"]-=3; console.log(subtitlelist[i]["left"]); subwo[i].style.left = subtitlelist[i]["left"]+"px"; } } } } fire.onclick = function(){ if (timercreated==false) { console.log(timercreated); window.t = setInterval(update,500); timercreated = true; } var colorvalue = document.getElementsByName("color"); if (subtitle.value==null||subtitle.value=="") { return; }else{ if (subtitlelist.length<=50) { var subword = new Object();//------每次都要创建新的对象 subword["word"] = subtitle.value; for (var i=0;i<colorvalue.length;i++) { if (colorvalue[i].checked==true) { subword["color"] = colordict[colorvalue[i].value]; break; } } subword["left"] = 792; subword["top"] = parseInt(Math.random()*600)+"px"; subword["iscread"] = false; subw = document.createElement("span"); subw.className = "subword"; subw.style.color = subword["color"]; subw.innerText = subword["word"]; subw.style.left = subword["left"]+"px"; subw.style.top = subword["top"]; page1.appendChild(subw); subword["iscread"] = true; subtitlelist.push(subword); }else{ alert("弹幕是有上限的,请待会在发"); } } }
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决评论 打赏 举报无用 1