下面对面向对象写个小案例(红绿灯)
上面是原图 用来来实现点击图片,红绿灯的颜色改变,控制背景图片的定位来改变
点击一下
就是要完成上面的效果
如果只要实现一个
CSS
div{
width: 335px; height: 890px;
margin-left: 20px;
float: left;
background: url(timg.jpg);
border: 1px solid saddlebrown;
background-position: -335px 0;
}
js
var deng = document.querySelector("#deng"); //找到deng的位置
var color = 0; //判断颜色
deng.onclick = function(){
color++;
if(color > 2){
color = 0;
}
this.style.backgroundPosition = -335 * color + "px 0";
}
//当用这样的方法写多个红绿灯就要多个deng的DIV 和多的color来控制不同DIV不同的颜色,如果只有个color那么就会出现多个div控制一套颜色(color)的改变,而不可以控制属于自己的那套颜色的改变
//所以要写多个color,那么为了简写代码可以用面向对象的写法
//原理从color是全局变量,改我用面向对象的写法吧color变成对象的属性,这样就有属于自己的color而不是公用(也就是为什么构造函数中是什么值(color)相同但他们却不全等(堆中内存地址)的用法)
function Hld() {
this.dom = document.createElement("div"); //创建一个DIV是我构造函数生成的对象中的dom属性
document.body.appendChild(this.dom); //上树 吧DIV放到doby中
this.color = 0;
var that = this; //因为下面事件函数的this是this.dom 而我们要在事件函数中要改变的是that所代表的this的值为new出来的对象中的color值的改变
this.dom.onclick = function(){
that.color++;
if(that.color > 2){
that.color = 0;
}
that.dom.style.backgroundPosition = -335*that.color +"px 0";
}
}
var H = new Hld();
var H2 = new Hld();
var H3 = new Hld();
//这样做出来的就可以自己控制自己的一套颜色的改变因为:构造函数new生成的对象的值是一样的内存堆位置是不一样的,所以每一个对象中的属性是互不相关的自己管理,所以达到了我们需要的效果;
//什么时候用面向对象:当出现多个结构相同,行为一样的时候,用面向对象