js,模拟弹幕发射,有些bug不明白,求帮助、、、
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、发射多个时,弹幕的速度好像会叠加。

2个回答

 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("弹幕是有上限的,请待会在发");
        }

    }

}

qq_31976161
.无聊de热水 很好,谢谢!!
一年多之前 回复
caozhy
贵阳老马马善福专业维修游泳池堵漏防水工程 不错!
一年多之前 回复

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8" /> 
  <title></title> 
 </head> 

 <style type="text/css"> 
  *{ 
   padding: 0; 
   margin: 0; 
  } 
  .shooter{ 
   width: 600px; 
   height: 60px; 
   /*background: black;*/ 
   margin: 0 auto; 
  } 
  .shooter input{ 
   width: 300px; 
   height: 40px; 
   border: none; 
   border-radius: 7px; 
   box-shadow: 0 0 8px rgba(182,195,214,0.6)inset; 
   padding-left: 15px; 
   margin-top: 10px; 
  } 
  .shooter button{ 
   width: 80px; 
   height: 40px; 
   border: none; 
   margin-left: 10px; 
   background-color:#339B53; 
   border-radius:8px; 
   color: white; 
   cursor: pointer; 
  } 

  .shooter button:hover{ 
   font-size: 14px; 
   background:#008000; 
  } 
  .content{ 
   width: 100%; 
   height: 600px; 
   background: gray; 
   position: relative; 
   overflow: hidden; 
  } 

  .bullet{ 
   position: absolute; 
   /*right: 0;*/ 
   /*left:1600px;*/ 
   word-break: keep-all; 
   /*不让单词折行*/ 


  } 

 </style> 

 <body> 
  <div class="shooter"> 

   <input type="text"/> 
   <button>发射</button> 

  </div> 
  <div class="content"> 

  </div> 
  <script type="text/javascript" src="js/jquery-2.0.3.js" ></script> 

  <script type="text/javascript"> 
   $("button").click(function(){ 

    var msg = $("input").val(); 
    //取出输入框内容 

    if(msg.length > 15){ 

     alert("字数不得超过15个!"); 
     return; 
    } 

    var bullet = $("<div>"); 
    //生成一条弹幕 
    bullet.text(msg); 
    //将输入框内容放置到div中 
    bullet.addClass("bullet"); 
    //为bullet这个div添加样式bullet 
    bullet.css("top",Math.round(Math.random()*500)); 
    //随机设置弹幕位置 
    bullet.css("left","1600px"); 
    bullet.css("font-size",Math.round(Math.random()*60)+12+"px"); 
    bullet.css("color","rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"); 
//    alert(window.getComputedStyle(bullet,null).width); 
    bullet.animate({ 
     left:-1000//此处视为bug,应该随着弹幕的长短而变化 
    },Math.round(Math.random()*9000)+1000,"linear", function(){ 
     bullet.remove(); 
     //当运动结束时,删除弹幕 
    }); 

    $(".content").append(bullet); 
    //将弹幕添加到屏幕中 


   }); 
  </script> 
 </body> 
</html>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问