Hvordan Roter tekst Med Javascript

Det er vanskelig å vite hvordan potensielle kunder kan reagere på en reklame slagord, og mange nettsteder vil skape flere slagord, rotere tekst og måle antall klikk for å avdekke den mest effektive slagord. Du kan bruke Javascript for å rotere teksten på skjermen ved å opprette en rekke tekst som skal vises, og skaper en funksjon for å vise neste tekst element i matrisen og ringer "setInterval" metode for å gjennomføre rotasjon på en regelmessig tidsbestemt intervall.

Bruksanvisning

1 Opprett en ny HTML-dokument med Notepad eller en HTML-editor. Sett HTML overskrifter i dokumentet:

<! DOCTYPE HTML>

<Html>

<Head>

<Meta charset = "utf-8">

<Title> Roter Text </ title>

2 Legg Javascript-kode for å opprette en rekke tekstmeldinger til å rotere. Beregne posisjonen for den siste tekstmeldingen i matrisen ved å ta lengden og trekke en. Initial en variabel (pekeren) til å spore indeksen for gjeldende tekstmelding i rekken.

<Script>

Var text = [ "Spesialtilbud - Klikk her!", "Free Stuff - Klikk her!", "Ikke gå glipp av dette tilbudet - Klikk her!"];

Var maxSlogans = text.length-en;

Var Strøm = 0;

3 Opprett en Javascript-funksjonen til å rotere teksten. Velg neste tekstmelding i matrisen eller flytte pekeren tilbake til den første tekstmeldingen hvis du har nådd slutten av tabellen. Vis teksten ved å erstatte "innerhtml" egenskap av <div> tag med tekstmeldingen:

fungere rotateText () {

if (++current > maxSlogans) current = 0;

document.getElementById ( "textDiv") innerhtml = "& lt; a href =" http://example.com/special '. + strøm +' php ">" + tekst [nåværende] + '& lt; / a>' ;

}

4 Ring Java "setTimeout" metoden med funksjonen du ønsker å utføre og gjennomføring intervallet i millisekunder. For eksempel, kjør "rotateText" -funksjonen hvert 10. sekund:

window.setInterval ( "rotateText ()", 10000);

</ Script>

</ Head>

5 Lag en <div> i kroppen av dokumentet og tilordne den id som du brukte i Javascript rotasjon funksjonen. Vise den første teksten slagord inne i <div> tag:

<Body>

<Div id = "textDiv"> <a href="Special"> http://example.com/special0.php">Special Tilbud - Klikk her </a> </ div>!

</ Body>

</ Html>

6 Lagre filen. Åpne den i en nettleser og se teksten rotere på skjermen.

Hint

  • Hvis du roterer tekst som kommer fra en uklarert kilde, opprette et nytt element ved hjelp av "createTextNode" og legge det til dokumentet ved hjelp av "appendChild" for å hindre script-injeksjon angrep.