问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

用简单的JS让圆 动起来

头像
FengNianya
    1371916

    我想用简单的JS让圆 动起来，但是没有成功
    图片描述

    <style media="screen">
      #demo{
        width: 200px;height: 200px;
        background-color: rgb(235, 114, 97);
        border-radius: 100%;
        position: absolute;
        top: 200px;left:50px;
      }
    </style>
  </head>
  <body>
    <section>
      <h2>利用JS函数 setTimeout()做简单的动画</h2>
      <div class="" id="demo">

      </div>
    </section>
  </body>

window.onload=elementMove;
function elementMove(){
  var element=document.getElementById("demo");
  // 获取位置  parseInt函数是取字符串里的数字 parse:解析
  var elementX,elementY;
  elementX=parseInt(element.style.left);
  elementY=parseInt(element.style.top);
  if (elementX==600 && elementY==400) {
    return true;
  }
  if (elementX<600) {
    elementX++;
  }
  if (elementY<400) {
    elementY++;
  }
  element.style.left=elementX+"px";
  element.style.top=elementY+"px";
  setTimeout("elementMove()",10);
};
    javascriptcsshtml
    阅读 4.3k
    3 个回答
    得票最新
    头像
    某熊猫桑
      16.1k61547
      ✓ 已被采纳

      这样？

      HTML：

      <style>
    #demo {
        width: 200px;
        height: 200px;
        background-color: rgb(235, 114, 97);
        border-radius: 100%;
        position: absolute;
        top: 200px;
        left: 50px;
    }
</style>
<section>
    <h2>利用JS函数 setTimeout()做简单的动画</h2>
    <div class="" id="demo"> </div>
</section>

      JavaScript：

      function getStyle(elem, prop) {
    var elemStyle = window.getComputedStyle(elem).getPropertyValue(prop);
    return parseInt(elemStyle);
}

function elementMove() {
    var element = document.getElementById("demo");
    var elementX, elementY;
    elementX = getStyle(element, 'left');
    elementY = getStyle(element, 'top');
    if (elementX == 600 && elementY == 400) {
        return true;
    }
    if (elementX < 600) {
        elementX++;
    }
    if (elementY < 400) {
        elementY++;
    }
    element.style.left = elementX + "px";
    element.style.top = elementY + "px";
    setTimeout(elementMove, 10);
};

elementMove();

      1. 怎么拿样式数值，getStyle()里写了；

      2. setTimeout()虽然第一参数可以写字符串（eval运行），但是非常不建议；

      3. 后续可以考虑用requestAnimationFrame替换掉setTimeout;

      4. 多看看MDN。

      头像
      严少
        852

        setTimeout第一个参数是函数,你传个字符串进去是干什么?而且setTimeout只能执行一次，换成setInterval,而且style.left只能获取行内样式，elementX打印出来的是NaN你想要什么效果?

        头像
        aliast
          302
             var element=document.getElementById("demo");
   // 先初始化一下
   element.style.left = "50px"
   element.style.top = "200px"

   elementMove()

   function elementMove(){
     
     // 获取位置  parseInt函数是取字符串里的数字 parse:解析
     var elementX,elementY
     elementX=parseInt(element.style.left);
     elementY=parseInt(element.style.top);
     if (elementX==600 && elementY==400) {
       return true;
     }
     if (elementX<600) {
       elementX++;
     }
     if (elementY<400) {
       elementY++;
     }
     element.style.left=elementX+"px";
     element.style.top=elementY+"px";
     setTimeout("elementMove()",10);
   };
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题