首页 新闻 会员 周边

JS中，提示错误：The node to be removed is not a child of this node.

0
悬赏园豆：5 [已解决问题] 解决于 2016-09-11 21:00

我今天写了一个弹幕效果，结果老是提示标题的那个错误

我的代码如下：提示的是

 danmu.removeChild(obj);这一句错误，大神告诉我为什么错误啊。。。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿弹幕效果</title>
    <style>
    *{margin: 0;padding: 0;list-style: none;}    
    html,body{width: 100%;height: 100%;}
    body{background-color: #000;font-family: '微软雅黑';}
    #danmu{position: relative;height: 100%;width: 100%;overflow: hidden;font-size: 50px;}
    #danmu .newli{background-color: #fff;height: 50px;line-height: 50px;position: absolute;overflow: hidden;}
    </style>
</head>
<body>
    <div id="danmu"></div>
    <script>
        var danmu=document.getElementById('danmu');
        var winH=danmu.clientHeight;
        var timer1=null;
        var speak=['哇塞好牛逼啊','好帅啊','前方高能','hahahahaha','哈哈哈哈','风流倜傥','我爱你阿啊啊啊','哈哈哈'];
        function insert(){
            var newli=document.createElement('div');
            var randomS=Math.floor(Math.random()*8);
            var r=Math.floor(Math.random()*266);
            var g=Math.floor(Math.random()*266);
            var b=Math.floor(Math.random()*266);
            newli.innerHTML=speak[randomS];
            newli.className='newli';
            newli.style.color='rgb('+r+','+g+','+b+')';
            var t=winH-50;
            var newliT=Math.floor(Math.random()*(t-1));
            var newliL=danmu.clientWidth;
            newli.style.left=newliL+'px';
            newli.style.top=newliT+'px';
            danmu.appendChild(newli);
            move(newli);
        }
        function move(obj){
            timer1=setInterval(function(){
                // var danmu=document.getElementById('danmu');
                var newliW=obj.clientWidth;
                var run=obj.offsetLeft;
                run--;
                if (run<=-newliW) {
                    danmu.removeChild(obj);
                    clearInterval(timer1);
                }
                obj.style.left=run+'px';
            },1)
         }
         // insert();
         var timer2=setInterval(function(){
             insert();
         },1000);
        window.onfocus=function (){
        clearInterval(timer2);
        timer2=setInterval(function(){
            Add();
        },1000);
     }
    window.onblur=function (){
            clearInterval(timer2);
        }
    </script>
</body>
</html>
骑猪敲代码的主页 骑猪敲代码 | 初学一级 | 园豆：200
提问于：2016-09-11 18:37
< >
分享
最佳答案
0

问题出在这一段：

timer1=setInterval(function(){
    //...
},1);

timer1是个全局变量，也就是每个对象都共享这个变量，肯定会冲突。

改成局部变量

var timer1

就好了，这样每个对象就有了各自的定时器。

收获园豆：5
逐影 | 小虾三级 |园豆：982 | 2016-09-11 20:40
其他回答(2)
0

没细看代码，你的timer1会执行多次，会不会是不止remove了一次？

 

一剑侵心 | 园豆：281 (菜鸟二级) | 2016-09-11 19:39

 提示信息是不能删除子节点，不知道是咋回事。。

支持(0) 反对(0) 骑猪敲代码 | 园豆：200 (初学一级) | 2016-09-11 19:47
0

var newli=document.createElement('div');

这个被设成局部变量了,在move()函数里不能被调用,把前面的var 去掉

一只求学喵 | 园豆：202 (菜鸟二级) | 2016-09-12 09:41

w我要连续定义很多个新节点，按你说的那样虽然可以，但是效果就出不来了。

支持(0) 反对(0) 骑猪敲代码 | 园豆：200 (初学一级) | 2016-09-12 09:45

@骑猪敲代码: ?可以创建多个div啊,并不矛盾

支持(0) 反对(0) 一只求学喵 | 园豆：202 (菜鸟二级) | 2016-09-12 09:49

@一只求学喵: 那我试试去。。

支持(0) 反对(0) 骑猪敲代码 | 园豆：200 (初学一级) | 2016-09-12 09:50
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。