移动的小球

css:#box{position:absolute;width:120px;height:120px;line-height:120px;text-align:center;background:red;color:#fff;border-radius:60px;}
当所有代码写完之后，就只剩下了上方的css了，对于别人来说可能基本上就完事了，但是我的弱点就是写css，每次写css都要用很长的时间更改，但最终写出来还是很有成就感的。

<div id="box">点我啊，跑！</div>
<script>
  function animate(obj, option) {
    clearInterval(obj.timer);                           // 防止多次触发事件，重复开启定时器
    obj.timer = setInterval(function() {
      var flag = true;                                  // 元素对象移动的标志，true表示已完成
      for (var k in option) {
        var leader = parseInt(getStyle(obj, k)) || 0;   // 获取指定元素当前属性值
        var target = option[k];                         // 获取指定元素目标属性值
        var step = (target - leader) / 10;              // 计算每次移动的步长
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader = leader + step;           // 计算属性值
        obj.style[k] = leader + 'px';     // 设置属性值
        if (leader != target) {           // 判断是否完成移动
          flag = false;
        }
      }
      if (flag) {                         // 移动完成后清除定时器
        clearInterval(obj.timer);
      }
    }, 15);
  }
  function getStyle(obj, attr) {
    if (window.getComputedStyle) {        // 标准浏览器
      return window.getComputedStyle(obj, null)[attr];**（要想到兼容多个版本的浏览器，让我自己想是想不到的）**
    } else {                              // 早期版本IE的浏览器，IE6~8
      return obj.currentStyle[attr];
    }
  }
  var obj = document.getElementById('box');
  obj.onclick = function() {
    animate(obj, {'left': 400, 'top': 200});
  };
  </script>

**当课上老师讲完一遍后，自己课下不去看老师写好的代码，完全靠自己的印象和自己上课的理解去写，会忘写 很多东西，很多地方的逻辑整理不清楚，尤其是在移动步长的时候，对其没有大体的概念，需要修改多次才能搞好。**

用到的知识点：实现DOM元素的动画是javaScript的常见功能之一。
                         target表示目标点   leader表示起始点   step表示从起始点到目标点每次缓动的步长
                         版本不支持现象，需要通过指定元素对象的currentStyle来实现