为了账号安全,请及时绑定邮箱和手机立即绑定

js实现图片慢慢移动到指定位置后停止,左右移动的看我代码错哪里了?急求

/ 猿问

js实现图片慢慢移动到指定位置后停止,左右移动的看我代码错哪里了?急求

木易老三 2017-06-20 14:07:16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box" style="width: 100px;height: 100px; background: blue;position:absolute;left:0;top:40px;"></div>
        <button type="button" id="start">开始</button>
        <script>
        window.onload = function () {
          var box = document.getElementById('box');
          var start = document.getElementById('start');
          var timer;
        }
         start.onclick = function () {
            timer = setInterval(animFn, 50);
          }
        
         function animFn () {
            box.style.left = parseInt(box.style.left) + 5 + 'px';
            
            box.style.left = '100px';
            window.clearInterval(timer);
          }
          
            

        </script>
</body>
</html>

查看完整描述

2 回答

已采纳
?
李晓健
function animFn () {
    if(box.style.left === '100px'){
        window.clearInterval(timer);
        return;
    }
    box.style.left = parseInt(box.style.left) + 5 + 'px';
   // box.style.left = '100px';
}


查看完整回答
4 反对 回复 2017-06-20
?
李晓健
function animFn () {
    box.style.left = parseInt(box.style.left) + 5 + 'px';
    if(box.style.left === '100px'){
        window.clearInterval(timer);
    }
   // box.style.left = '100px';
}

不知道你要的是不是这个效果,如果问题已解决,请记得采纳答案

查看完整回答
2 反对 回复 2017-06-20
  • 木易老三
    木易老三
    好使了,到指定位置停止了,但是我点了下开始按钮,指定位置上又开始运动了,我就想让他点击按钮到指定位置,就一次。再点击按钮div也不会在运动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <div id="box" style="width: 100px;height: 100px; background: blue;position:absolute;left:0;top:40px;"></div> <button type="button" id="start">开始</button> <script> window.onload = function () { var box = document.getElementById('box'); var start = document.getElementById('start'); var timer; } start.onclick = function () { timer = setInterval(animFn, 50); } function animFn () { box.style.left = parseInt(box.style.left) + 5 + 'px'; if(box.style.left === '400px'){ window.clearInterval(timer); } } </script> </body> </html>
  • 木易老三
    木易老三
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <div id="box" style="width: 100px;height: 100px; background: blue;position:absolute;left:0;top:40px;"></div> <button type="button" id="start">开始</button> <script> window.onload = function () { var box = document.getElementById('box'); var start = document.getElementById('start'); var timer; } start.onclick = function () { timer = setInterval(animFn, 50); } function animFn () { box.style.left = parseInt(box.style.left) + 5 + 'px'; if(box.style.left === '400px'){ window.clearInterval(timer); } } </script> </body> </html>

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信