Sådan ændres en baggrund dynamisk på en hjemmeside

Ved hjælp af CSS og JavaScript kan du dynamisk ændre baggrunden på din hjemmeside. Du bruger koden til at ændre baggrunden hver gang en bruger indlæser hjemmesiden i en browser, og koden fungerer også, hvis brugeren opdaterer hjemmesiden i browservinduet. Du skal have de billeder, der bruges i din baggrund, uploadet til din server, så de vises korrekt i browseren.

1.

Højreklik på den HTML-side, du vil redigere, og vælg "Åbn med." Klik på dit HTML-editor i listen over programmer.

2.

Indsæt hvert billede i et JavaScript-array. F.eks. Opretter følgende kode en række af to billeder på webhostserveren:

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

3.

Generer et tilfældigt tal. Det tilfældige tal bruges til tilfældigt at hente et billede fra arrayet. I dette eksempel er to billeder indlæst, så du skal generere et tal mellem 0 og 1. Følgende kode genererer et tilfældigt tal:

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

4.

Vis baggrundsbilledet fra arrayet. Følgende kode kombinerer række af billeder og tilfældigt tal for at vise et tilfældigt billede som baggrunden for hjemmesiden:

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

Populære Indlæg