找个地方记录坑____面向对象解决问题小案例

最新推荐文章于 2022-04-12 21:56:50 发布

lx_9119

最新推荐文章于 2022-04-12 21:56:50 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/lx_9119/article/details/101865189

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>兄弟多个1</li>
			<li>兄弟多个2</li>
			<li>兄弟多个3</li>
			<li>兄弟多个4</li>
			<li>兄弟多个5</li>
			<li>兄弟多个6</li>
		</ul>
	</body>
</html>

<script>
	//确定构造函数--特效名称
	//确定构造函数的属性--要操作的元素
	//确定构造函数的方法--特效中的具体功能实现
	//  变色   鼠标事件操作    入口方法 init  
	
	//页面加载后  创建一个HighLight类的对象  调用其中的方法实现页面加载隔行变色
	window.onload = function(){
		var hh = new HighLight();
		hh.init();
		hh.hover();
	}
	function HighLight(){
		//实例属性 操作的元素作为属性
		this.list = document.getElementsByTagName("li");
		//实例方法   控制颜色设置   要设置obj对象的color背景颜色
		this.setColor = function(obj,color){
			obj.style.backgroundColor = color;
		}
		
		//实例方法  入口方法  实现页面加载就隔行变色 写成默认样式
		this.init = function(){
			//操作所有的list隔行变色
			for( var i = 0 ; i < this.list.length;i++ ){
				if( i%2 ){
					//设置this.list[i] 的背景颜色
					this.setColor(this.list[i],"teal");
				}else{
					this.setColor(this.list[i],"pink");
				}
			}
		}
		//实例方法  鼠标移入和移出时操作颜色高亮或恢复
		this.hover = function(){
			//为每一个li添加事件
			for( let i = 0 ; i < this.list.length ; i++ ){
				this.list[i].onmouseover = function(){
					//事件中的this指向 事件的触发者  
					//只有让事件中的this指向构造函数new出来的对象 才可以调用setColor这个方法
					//鼠标移入 记录颜色值
					this.color = this.list[i].style.backgroundColor;
					this.setColor( this.list[i] , "red" );
					//事件还有定时器里边的this一定要bind改变一下
				}.bind(this)
				
				this.list[i].onmouseout = function(){
					this.setColor( this.list[i] , this.color );
				}.bind(this)
			}
		}
	}
	
	
</script>