Webサイトで背景を動的に変更する方法

CSSとJavaScriptを使用して、Webサイトの背景を動的に変更できます。 ユーザがWebサイトをブラウザにロードするたびに背景を変更するためにコードを使用します。また、ユーザがブラウザウィンドウでWebサイトを更新した場合もコードは機能します。 バックグラウンドで使用されている画像をサーバーにアップロードして、ブラウザに正しく表示されるようにする必要があります。

1。

編集したいHTMLページを右クリックして「アプリケーションから開く」を選択します。 プログラムの一覧でHTMLエディタをクリックします。

2。

各画像をJavaScriptの配列にロードします。 たとえば、次のコードはWebホストサーバー上に2つのイメージの配列を作成します。

var background = new Array（）; background [0] = "/images/bg1.gif"; background [1] = "/images/bg2.gif";

3。

乱数を生成します。 乱数は、配列から画像をランダムに取得するために使用されます。 この例では、2つのイメージがロードされるので、0から1の間の数を生成する必要があります。次のコードは乱数を生成します。

var numberGen = Math.floor（Math.random（）* 1）

4。

配列から背景画像を表示します。 次のコードは、Webサイトの背景としてランダムな画像を表示するために、画像の配列と乱数を組み合わせたものです。

document.body.style.background = 'url（' + background [numberGen] + '）';