代码参考来源http://js.fgm.cc/learn/，本系列以面向对象的知识重构代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#outer{width:500px;margin:0 auto;padding:0;text-align:center;}#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}</style></head><body><div id="outer"><input id="a1" type="button" value="变宽" /><input type="button" value="变高" /><input type="button" value="变色" /><input type="button" value="隐藏" /><input type="button" value="重置" /><div id="div1"></div></div><script>function Divblock(){ this.set(); this.addmouseevents();}Divblock.PRototype=(function(){ var element=document.getElementById("div1"), style=element.style, colorslist=["red","orange","yellow","green","blue","purple"], num=0; return{ wider:function(){ style.width=(parseInt(style.width)+30)+"px";}, higher:function(){ style.height=(parseInt(style.height)+30)+"px";}, changecolor:function(){ num<=colorslist.length?num=num:num=0; style.background=colorslist[num++];}, hide:function(){ style.display="none";}, set:function(){ style.width="100px"; style.height="100px"; style.background="black"; style.display="block"}, addmouseevents:function(){ var divs=document.createElement("div"), text=document.createTextNode(""); divs.appendChild(text); divs.style.background="white"; divs.style.fontSize="12px" divs.style.position="absolute"; element.onmouSEOut=function(){ document.body.removeChild(divs)}; element.onmousemove=function(e){ text.nodeValue="W:"+parseInt(style.width)+" H:"+parseInt(style.height)+" C:"+style.background+" "; text.nodeValue=text.nodeValue.toUpperCase(); divs.style.left=e.clientX+5+"px"; divs.style.top=e.clientY+5+"px"; document.body.appendChild(divs); } } } })(); function Buttoms(){ this.inputs=document.getElementsByTagName("input"); }Buttoms.prototype={ add_even_listener:function(o){ this.inputs[0].onclick=function(){o.wider()}; this.inputs[1].onclick=function(){o.higher()}; this.inputs[2].onclick=function(){o.changecolor()}; this.inputs[3].onclick=function(){o.hide()}; this.inputs[4].onclick=function(){o.set()}; } }var divblock=new Divblock(); var buttoms=new Buttoms();buttoms.add_even_listener(divblock); </script> </body></html>
2015-07-1822:30:00
新闻热点
疑难解答
