Come ruotare il testo con JavaScript

July 8

E 'difficile sapere come i clienti potenziali potrebbero reagire ad uno slogan pubblicitario, e molti siti web creerà slogan diversi, ruotare il testo e misurare il numero di clic per determinare lo slogan più efficace. È possibile utilizzare JavaScript per ruotare il testo sullo schermo con la creazione di una serie di testo da visualizzare, la creazione di una funzione per visualizzare l'elemento di testo successivo nella matrice e chiamando il metodo "setInterval" per attuare la rotazione a intervalli regolari a tempo.

istruzione

1 Creare un nuovo documento HTML utilizzando il blocco note o un editor HTML. Inserire le intestazioni HTML nel documento:

<! DOCTYPE HTML>

<Html>

<Head>

<Meta charset = "utf-8">

<Title> ruotare il testo </ title>

2 Aggiungere il codice JavaScript per creare una serie di messaggi di testo a ruotare. Calcolare la posizione dell'ultimo messaggio di testo nella matrice prendendo la lunghezza e sottraendo uno. Inizializzare una variabile (puntatore) per monitorare l'indice del messaggio di testo corrente nella matrice.

<Script>

var text = [ "Offerta Speciale - clicca qui!", "Free Stuff - clicca qui!", "Non perdere questa offerta - Clicca qui!"];

var = maxSlogans text.length-1;

corrente var = 0;

3 Creare una funzione JavaScript per ruotare il testo. Selezionare il messaggio di testo successivo nella matrice o spostare il puntatore di nuovo al primo messaggio di testo se hai raggiunto la fine della matrice. Visualizzare il testo sostituendo la "innerHTML" proprietà del tag <div> con il messaggio di testo:

funzione rotateText () {

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

document.getElementById ( "textDiv") innerHTML = '& lt; a href = "http://example.com/special'. + corrente + '.php">' + testo [corrente] + '& lt; / a>' ;

}

4 Chiamare il metodo JavaScript "setTimeout" con la funzione che si desidera eseguire e l'intervallo di esecuzione in millisecondi. Ad esempio, eseguire la funzione "rotateText" ogni 10 secondi:

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

</ Script>

</ Head>

5 Creare un <div> nel corpo del documento e assegnare l'ID che si è utilizzato nella funzione di rotazione JavaScript. Visualizzare il primo slogan testo all'interno del tag <div>:

<Body>

<Div id = "textDiv"> <a href="Special"> http://example.com/special0.php">Special Offerta - Clicca qui </a> </ div>!

</ Body>

</ Html>

6 Salvare il file. Aprire in un browser e guardare il testo ruotare sullo schermo.

Consigli e avvertenze

  • Se si ruota il testo che proviene da una fonte non attendibile, creare un nuovo elemento con "createTextNode" e aggiungerlo al documento usando "appendChild" per prevenire attacchi di script-iniezione.