js 点击实现div变大并且能够切换颜色

代码:

<div id="box" style="width: 100px;height: 100px;border: 1px solid red;"></div>
<script>
	//先获取div
	var div = document.getElementById("box")
	//定义一个开关
	var flag=true;
	//设宽高默认为100
	var width=100;
	//把颜色存入数组
	var colorArr=["red","green","blue","pink","yellow"];
	var index=0;
	//div点击事件
	div.onclick = function() {
		//切换颜色
		//index是colorArr的索引
		index++;
		div.style.backgroundColor=colorArr[index];
		//当index等于colorArr的最后一个索引时,index的值设为-1 index++就使索引又为0
		if(index==colorArr.length-1){
			index=-1;
		}
		//增大宽高
		//如果为开
		if (flag) {
			//宽高加10
			width+=10;
			//如果宽高等于200
			if (width==200) {
			//flag=false 关 执行else
			flag = !flag;
			}
		} else {
			width-=10;
		if (width==100) {
			flag =!flag
		}
		}
			div.style.width=width+"px";
			div.style.height=width+"px";
	}

效果