So ändern Sie einen Hintergrund dynamisch in einer Website

Mit CSS und JavaScript können Sie den Hintergrund Ihrer Website dynamisch ändern. Sie verwenden den Code, um den Hintergrund jedes Mal zu ändern, wenn ein Benutzer die Website in einen Browser lädt. Der Code funktioniert auch, wenn der Benutzer die Website im Browserfenster aktualisiert. Sie müssen die in Ihrem Hintergrund verwendeten Bilder auf Ihren Server hochgeladen haben, damit sie ordnungsgemäß im Browser angezeigt werden.

1

Klicken Sie mit der rechten Maustaste auf die HTML-Seite, die Sie bearbeiten möchten, und wählen Sie "Öffnen mit". Klicken Sie in der Liste der Programme auf Ihren HTML-Editor.

2

Laden Sie jedes Bild in ein JavaScript-Array. Mit dem folgenden Code wird beispielsweise ein Array mit zwei Bildern auf dem Webhostserver erstellt:

var background = neues Array (); Hintergrund [0] = "/images/bg1.gif"; Hintergrund [1] = "/images/bg2.gif";

3.

Erzeugen Sie eine Zufallszahl. Die Zufallszahl wird verwendet, um ein Bild zufällig aus dem Array abzurufen. In diesem Beispiel werden zwei Bilder geladen, sodass Sie eine Zahl zwischen 0 und 1 generieren müssen. Der folgende Code generiert eine Zufallszahl:

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

4

Zeigt das Hintergrundbild aus dem Array an. Der folgende Code kombiniert das Array von Bildern und die Zufallszahl, um ein zufälliges Bild als Hintergrund der Website anzuzeigen:

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