js实现点击按钮颜色向内移动_在js里面怎么将颜色移到中间-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44075557/article/details/103092382

年少不知头发贵，老来悔学计算机

<body>	
		<div class="wp">
			<div id="">
				<div id="">
					<div id="">
					<div class="nei">
						</div>
					</div>
				</div>
			</div>
		</div>
		<input type="button" name="wai" id="wai" value="由外向内" />
		<input type="button" id="nei" value="由内向外" />
	</body>
	<script type="text/javascript">
		var div=document.getElementsByTagName('div');
		console.log(div[0].className);//div的顺序是由外向内
		var arr=[];
		//声明获取随机数的函数
		function rand(x,y){
			return Math.floor(Math.random()*(y-x+1))+x;
		}
		var wai=document.getElementById("wai");
		var nei=document.getElementById("nei");
		//点击wai
		wai.onclick=function(){
			var r=rand(0,255);var g=rand(0,255);
			var b=rand(0,255);
			var rgb='rgb('+r+','+g+','+b+')';
			arr.unshift(rgb);
			console.log(arr)
			for (var i=0;i<div.length;i++) {
				div[i].style.background=arr[i];
			}
			if(arr.length>=6){
				arr.pop();
			}
		};
				nei.onclick=function(){
			var r=rand(0,255);var g=rand(0,255);
			var b=rand(0,255);
			var rgb='rgb('+r+','+g+','+b+')';
			arr.push(rgb);
			if(arr.length>div.length){
				arr.shift();
			}
			console.log(arr)
			for (var i=0;i<div.length;i++) {
				if(arr.length<5){
					arr.reverse();
									div[div.length-1-i].style.background=arr[i];
									arr.reverse();
				}else{
				div[i].style.background=arr[i];
				}
			}
		};
	</script>