웹 사이트에서 백그라운드를 동적으로 변경하는 방법

CSS와 JavaScript를 사용하면 웹 사이트의 배경을 동적으로 변경할 수 있습니다. 사용자가 웹 사이트를 브라우저에로드 할 때마다 코드를 사용하여 배경을 변경하고 사용자가 브라우저 창에서 웹 사이트를 새로 고치면 코드도 작동합니다. 배경에 사용 된 이미지가 서버에 업로드되어 브라우저에 올바르게 표시되도록해야합니다.

1.

편집 할 HTML 페이지를 마우스 오른쪽 단추로 클릭하고 "연결 프로그램"을 선택하십시오. 프로그램 목록에서 HTML 편집기를 클릭하십시오.

2.

각 이미지를 JavaScript 배열에로드하십시오. 예를 들어 다음 코드는 웹 호스트 서버에 두 개의 이미지 배열을 만듭니다.

var background = new Array (); 배경 [0] = "/images/bg1.gif"; 배경 [1] = "/images/bg2.gif";

삼.

임의의 숫자를 생성하십시오. 난수는 배열에서 임의로 이미지를 검색하는 데 사용됩니다. 이 예제에서는 두 개의 이미지가로드되므로 0과 1 사이의 숫자를 생성해야합니다. 다음 코드는 난수를 생성합니다.

var numberGen = Math.floor (Math.random () * 1)

4.

배열의 배경 이미지를 표시합니다. 다음 코드는 이미지 배열과 난수를 결합하여 임의의 이미지를 웹 사이트 배경으로 표시합니다.

document.body.style.background = 'url ('+ 배경 [numberGen] + ')';