Så här byter du en bakgrund dynamiskt på en webbplats

Med CSS och JavaScript kan du dynamiskt ändra bakgrunden på din webbplats. Du använder koden för att ändra bakgrunden varje gång en användare laddar webbplatsen i en webbläsare, och koden fungerar också om användaren uppdaterar webbplatsen i webbläsarfönstret. Du måste ha bilderna som används i din bakgrund uppladdad till din server, så att de visas korrekt i webbläsaren.

1.

Högerklicka på HTML-sidan du vill redigera och välj "Öppna med." Klicka på HTML-redigeraren i listan med program.

2.

Ladda varje bild till en JavaScript-matris. Till exempel skapar följande kod en rad två bilder på webbhotellsservern:

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

3.

Generera ett slumptal. Slumpmässigt tal används för att slumpmässigt hämta en bild från matrisen. I det här exemplet laddas två bilder, så du måste skapa ett tal mellan 0 och 1. Följande kod genererar ett slumptal:

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

4.

Visa bakgrundsbilden från matrisen. Följande kod kombinerar arrayen av bilder och slumpmässigt nummer för att visa en slumpmässig bild som webbplatsens bakgrund:

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

Populära Inlägg