.无聊de热水 2018-08-03 13:25 采纳率: 0%
浏览 693
已采纳

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条回答 默认 最新

  • 天际的海浪 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条)

报告相同问题?

悬赏问题

  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入
  • ¥40 使用MATLAB解答线性代数问题
  • ¥15 COCOS的问题COCOS的问题
  • ¥15 FPGA-SRIO初始化失败
  • ¥15 MapReduce实现倒排索引失败
  • ¥15 ZABBIX6.0L连接数据库报错,如何解决?(操作系统-centos)
  • ¥15 找一位技术过硬的游戏pj程序员
  • ¥15 matlab生成电测深三层曲线模型代码
  • ¥50 随机森林与房贷信用风险模型