第一课 控制div属性

代码参考来源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-18 22:30:00

posted @ 2015-07-18 22:30  叠梦  阅读(259)  评论(0)  编辑  收藏  举报