setInterval() 对 style.marginLeft 不起作用

Question

I want the box I have created to move 20px every .5 seconds but it happens only once with setInterval()我希望我创建的框每 0.5 秒移动 20 像素，但它只发生一次setInterval()

 <style type="text/css">
            #box{
                background-color: green;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>

        <div id="box"></div>

        <script type="text/javascript">
            setInterval(function(){
                push();
            },500);
            function push(){
                var box = document.getElementById('box');
                box.style.marginLeft="20px";
            }
        </script>

Answer 1

the push function needs to be modified推送功能需要修改

        <script type="text/javascript">
        setInterval(function(){
            push();
        },500);
        function push(){
            var box = document.getElementById('box'),
            margin=parseFloat(box.style.marginLeft);

            box.style.marginLeft=(margin+20)+"px";
        }
    </script>

Answer 2

You need to add 20 extra pixel every iteration每次迭代都需要添加 20 个额外的像素

 setInterval(function(){ push(); },500); function push(){ var box = document.getElementById('box'); box.style.marginLeft= parseInt(box.style.marginLeft||0) + 20 + "px"; }

 #box{ background-color: green; width: 200px; height: 200px; }

 <div id="box"></div>

setInterval() 对 style.marginLeft 不起作用

问题描述

2 个解决方案

解决方案1
1 2015-07-05 05:43:53

解决方案2
1 已采纳 2015-07-05 05:44:09

setInterval() 对 style.marginLeft 不起作用

问题描述

2 个解决方案

解决方案1 1 2015-07-05 05:43:53

解决方案2 1 已采纳 2015-07-05 05:44:09

解决方案1
1 2015-07-05 05:43:53

解决方案2
1 已采纳 2015-07-05 05:44:09