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

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

我的代码如下:提示的是

 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>
jeck猫
浏览 1622回答 7
7回答

www说

问题出在这一段: timer1=setInterval(function(){ //... },1); timer1是个全局变量,也就是每个对象都共享这个变量,肯定会冲突。 改成局部变量 var timer1 就好了,这样每个对象就有了各自的定时器。

郎朗坤

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

千万里不及你

var newli=document.createElement('div'); 这个被设成局部变量了,在move()函数里不能被调用,把前面的var 去掉

函数式编程

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

蝴蝶刀刀

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

holdtom

@一只求学喵: 那我试试去。。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript