封装一个函数实现多个物体的不同变化

样式

div{
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 1;
	margin-bottom: 100px;
	border: 1px solid;
	/*position: absolute;*/
}

<div>width</div>
<div>height</div>
<div>opacity</div>
<div>borderwidth</div>
<script>
	var divlist = document.getElementsByTagName("div");
	//想要改变属性的数组
	var arrAttr = ['width','height','opacity','borderWidth'];
	//想要改变的目标的数组
	var targetAttr = [500,200,50,50]
	//循环为每个div绑定单击事件
	for(let i=0;i<divlist.length;i++){
		divlist[i].onclick = function(){
			// console.log(1)
			//每个div可以调用的同一个函数
			move(this,arrAttr[i],targetAttr[i])
		}
	}
	function move(ele,attr,target){
		clearInterval(ele.timer);
		var ispeed = null;
		//元素当前的属性值
		var icur = null;
		//为每个元素设置定时器
		ele.timer = setInterval(function(){
			// 如果传递的属性是opacity
			if(attr == 'opacity'){
				// 设置元素的初始透明度，将其扩大一百倍，方便后面计算
				icur = parseFloat(getStyle(ele,attr)) *100;
			}else{
				// 元素的其他几个属性的初始值
				icur = parseFloat(getStyle(ele,attr));
			}
			// 设置变化速度
			ispeed = (target - icur) / 9;
				// console.log(getStyle(ele,attr))
				// console.log(ispeed)
				// 如果变化速度大于0，向上取整，如果小于0，向下取整
				ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
				// 如果达到目标值
				if(target == icur){
					// console.log(1)
					// 清除定时器
					clearInterval(ele.timer)
				}else{//否则
					// 如果属性为opacity
					if(attr == 'opacity'){
						// 透明度的变化情况，当前值加变化值再除去之前扩大的倍数
						ele.style[attr] = (icur + ispeed) / 100;
					}else{
						// 其他属性的变化情况，当前值加上变化值
						//不能写成ele.style.attr,因为attr不是一个属性
						ele.style[attr] = icur + ispeed + 'px';
					}
					
				}
		},30)
		
	}
	//兼容写法，拿到元素当前的属性值
	function getStyle(elem,prop){
		if(window.getComputedStyle){
			return window.getComputedStyle(elem)[prop]
		}else{
			return elem.currentStyle[prop]
		}
	}
</script>