OOP定时器组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OOP定时器组</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        div.container div{
            text-align: center;
            margin: 5px;
            height: 60px;
            width: 100px;
            background: red;
            left: 100px;
        }
    </style>
    <script type="text/javascript">
        function FnGuo(oDiv,num){
            var oDivTemp=null;
            var _this = this;
            for(var i=1;i<=num;i++)
            {
                oDivTemp = document.createElement("div");
                oDivTemp.innerHTML = "第" + i + "个";
                oDiv.appendChild(oDivTemp);

                oDivTemp.oTimer = null;
                oDivTemp.nowLength = 100;

                oDivTemp.onmouseover = function(){
                    _this.fnLength(this,500);
                };
                oDivTemp.onmouseout = function(){
                    _this.fnLength(this,100);
                };
            }
        }

        FnGuo.prototype.fnLength = function(oDivTemp,tarLength){
            clearInterval(oDivTemp.oTimer);
            var speed = 0;
            oDivTemp.oTimer = setInterval(function(){
                speed = (tarLength-oDivTemp.nowLength)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(tarLength != oDivTemp.nowLength)
                {
                    oDivTemp.nowLength += speed;
                    oDivTemp.style.width = oDivTemp.nowLength + "px";
                }
                else
                {
                    //clearInterval(oDivTemp.oTimer);
                }
            },30);
        };
        window.onload = function(){
            var oDiv = document.getElementsByTagName("div")[0];
            var num = 6;//生成div的个数
            var oFnGuo = new FnGuo(oDiv,num);
        };
    </script>
</head>
<body>
    <div class="container"></div>
</body>
</html>
工欲善其事必先利其器