6個のdivブロック、ランダムカラー

仕事に参加した后、基本的にreactを使って、最近ボスはh 5+muiでappを作るように要求して、制作の过程の中で多くの原生jsがすでに熟知していないことを発见して、jsの基础はすべて悪くないようで、补习が必要です.appの1つの要件は、ページに対応するいくつかのモジュールが開くたびに異なるランダムな色を表示することです.私は関数にカプセル化して、足りないところがあって、また多くの指摘を望んでいます.コードは以下の通りです.    

1
2
3
4
5
6

.giveYouColorSeeSee {
	width: 100px;
	height: 100px;
	border: 1px solid blue;
	display: inline-block;
	margin-top: 10px;
	margin-right: 10px;
}				

var giveColor = document.getElementsByClassName('giveYouColorSeeSee');
var color = ['#578fff', '#8c9ffd', '#ff7ea2', '#ffbf43', '#74dde3', 'red'];
function randomColorOn(giveColor,color){//  1       ，          
	var arr2 = [];
	for(var i = color.length; i > 0; i--) {
		const num = Math.floor(Math.random() * color.length); //     
		arr2.push(color[num]); //          
		color.splice(num, 1); //         
	}
				 
	for(var j = 0; j < giveColor.length; j++) {
		giveColor[j].style.backgroundColor = arr2[j];
		}
	}
	randomColorOn(giveColor,color);