<!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>