JS错误记录

本次练习错误总结：

1. 改变border的宽度，属性名称不是直接写border，而是borderWidth。

2. 运动函数 -- 清除定时器 -- 开启新的定时器。不是在新定时器开启之后再清除，而是开启之前就要在运动函数里清空一次！

3. 这个获取的值需要先parseInt变成数字。且变量要放在定时器函数里面。（哪个函数使用的变量，就放在哪个函数里。）

var cur = parseInt(getStyle(obj, attr));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 10px solid black;
      background-color: yellow;
      float: left;
      margin: 30px;
    }
  </style>
  <script>
    window.onload = function () {
      var oDiv1 = document.getElementById('div1');
      oDiv1.onmouseover = function () {
        startMove(this, 'width', 600)
      };
      oDiv1.onmouseout = function () {
        startMove(this, 'width', 200)
      };

      var oDiv2 = document.getElementById('div2');
      oDiv2.onmouseover = function () {
        startMove(this, 'height', 600)
      };
      oDiv2.onmouseout = function () {
        startMove(this, 'height', 200)
      };

      var oDiv3 = document.getElementById('div3');
      oDiv3.onmouseover = function () {
        startMove(this, 'font-size', 50)
      };
      oDiv3.onmouseout = function () {
        startMove(this, 'font-size', 10)
      };

      var oDiv4 = document.getElementById('div4');
      oDiv4.onmouseover = function () {
        startMove(this, 'borderWidth', 150) //不是border，是borderWidth
      };
      oDiv4.onmouseout = function () {
        startMove(this, 'borderWidth', 10)
      };
    };

    function getStyle(obj, name) {
      if(obj.currentStyle)
        {
        return obj.currentStyle[name];
      }
      else
        {
          return getComputedStyle(obj, false)[name];
        }
    };

    function startMove(obj, attr, iTarget)
    {
      clearInterval(obj.timer); //清除定时器是放在运动函数里，新启动定时器之前，不是新启动的定时器里面。

      obj.timer = setInterval( function () {

        var cur = parseInt(getStyle(obj, attr));//这个变量也要放在定时器里面吗？？（一开始是放在运动函数里了）
        var speed = (iTarget - cur)/4;
        speed = speed>0? Math.ceil(speed):Math.floor(speed);

        if( cur == iTarget )
        {
          clearInterval(obj.timer)
        }
        else
          {
            obj.style[attr] = cur + speed + 'px';
          }
      },30)
    }
  </script>
</head>
<body>
<div id="div1">变宽</div>
<div id="div2">变高</div>
<div id="div3">这些字体会变大哦</div>
<div id="div4">border变化</div>
</body>
</html>