javascipt. 랜덤 그라데이션 배경

 

버튼을 누르면 colors 배열의 색을 랜덤으로 left, right 변수에 담아 그라데이션 배경으로 채운다.

같은 색이 채워지는걸 방지하고자 left와 right색이 같으면 컬러를 뽑는 함수를 다시 실행한다.

기능을 1. 색 랜덤 뽑기, 2. 색을 비교하여 배경색 바꾸기로 총 2개로 분리해봤는데 굳이 안그래도 될 것 같다.

---

indexOf()함수를 사용해보자.

• indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 
  검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다.
• 파라미터
  • searchvalue : 필수 입력값, 찾을 문자열
  • position : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치
• 찾는 문자열이 없으면 -1을 리턴합니다.
• 문자열을 찾을 때 대소문자를 구분합니다.

function pickColor(){
	let bgColor = [];
    while(bgColor.length < 2){
    	const index = colors[Math.floor(Math.random() * colors.length)];
        if (!(bgColor.indexOf(index) > -1) {
        	bgColor.push(index);
        }
    }
    body.style.background = `linear-gradient(to right, ${bgColor[0], ${bgColor[1]})`;
}

button.addEventListener("click", pickColor);

 

bgColor배열에 들어온 색(문자열)이 없으면 -1을 반환 => push,

이미 있으면 0(배열의 0번째에 있음을 뜻함)을 리턴할테니 0이 아니면 push를 하여

배열 색 중복을 방지한다.