Come ruotare un banner JS

November 19

Come ruotare un banner JS


Un rotatore banner è un piccolo pezzo di software che ruota in modo casuale gli annunci agli utenti vedono in una pagina Web. Rotazione Banner è vantaggioso per gli inserzionisti, dal momento che in genere costa meno di sponsorizzare un annuncio parziale, al contrario di un all'annuncio in una pagina Web. Rotazione banner beneficiano i proprietari di pagine Web, in quanto possono usufruire di molteplici opportunità pubblicitarie. I banner sono tipicamente ruotati quando un utente aggiorna la pagina, e gli annunci possono essere visualizzati in base a una serie di parametri preimpostati, come ora, giorno della settimana o vista percentuale.

istruzione

1 Aprire un editor di testo e creare un nuovo file di testo denominato "random_banner.html". Per creare un nuovo file in un editor di testo, selezionare "Nuovo" dal menu "File".

2 Aggiungere alcuni tag HTML di base per il file. Includere i seguenti tag: <html>, <head>, </ head>, <body>, </ body> e </ html>.

<Html>
<Head> </ head>
<Body> </ body>
</ Html>

3 Modifica random_banner.html e aggiungere un tag <script> tra i tag <head> e </ head> tag. Assegnare il tag <script> un attributo del tipo di "text / javascript" e aggiungere un </ script> tag per indicare la fine dello script. Qualsiasi testo inserito tra i tag <script> e </ script> tag verrà interpretato come codice JavaScript.

<Script type = "text / javascript">
</ Script>

4 Aggiungere una funzione JavaScript denominata bannerRotate () tra i tag <script type = "text / javascript"> e <script /> tag. Seguire il nome della funzione con una serie di parentesi graffe ( "{}") per indicare la posizione del codice funzione.

funzione bannerRotate ()
{}

5 Dichiarare una variabile denominata bannerTime tra parentesi graffe della funzione bannerRotate. Impostare la variabile bannerTime per il valore di ritorno di una funzione Math.random JavaScript. La funzione Math.random restituisce un numero casuale compreso tra 0 e 1.

bannerTime = Math.random ();

6 Utilizzare tre metodi document.write e tre istruzioni condizionali per ruotare uno dei tre banner sulla pagina. La prima bandiera deve essere visualizzato il 25 per cento del tempo (Banner 1), la seconda bandiera deve essere visualizzato il 50 per cento del tempo (Banner 2) e la terza bandiera deve essere visualizzato il 25 per cento del tempo (Banner 3). Inserire il codice condizionale subito dopo la dichiarazione della variabile bannerTime tra parentesi graffe della funzione del bannerRotate ().

if (bannerTime <0.25) {document.write ( "Banner 1");}
if (bannerTime> = 0.25 && bannerTime <0,75) {document.write ( "Banner 2");}
if (bannerTime> = 0.75) {document.write ( "Banner 3");}

7 Aggiungere un secondo tag <script> tra random_banner.html del <body> e </ body> tag. Come in precedenza, assegnare il tag <script> un attributo del tipo di text / javascript e chiudere il </ script> tag.

<Script type = "text / javascript">
</ Script>

8 Chiamare la funzione bannerRotate () inserendo il nome della funzione tra il secondo <script type = "text / javascript"> e <script /> tag. Dopo aver completato la Fase 8, random_banner.html dovrebbe apparire come mostrato di seguito. Salvare e chiudere random_banner.html.

<Html>
<Head>
<Script type = "text / javascript">
funzione bannerRotate ()
{
bannerTime = Math.random ();
if (bannerTime <0.25) {document.write ( "Banner 1");}
if (bannerTime> = 0.25 && bannerTime <0,75) {document.write ( "Banner 2");}
if (bannerTime> = 0.75) {document.write ( "Banner 3");}
}
</ Script>
</ Head>
<Body>
<Script type = "text / javascript">
bannerRotate ();
</ Script>
</ Body>
</ Html>

9 Aprire banner_rotate.html in un browser Web. Premi il pulsante di aggiornamento del browser un paio di volte per verificare che il banner è in rotazione, come indicato nel codice condizionale (Banner 1: 25 per cento, Banner 2: il 50 per cento, Striscione 3: il 25 per cento).

Consigli e avvertenze

  • I banner possono essere ruotati su pagine Web basate su tutte le scadenze, tra cui il giorno della settimana, il tempo della frequenza di giorno o vista.
  • Molti rotatori bandiera commerciali sono disponibili che forniscono una serie di ulteriori caratteristiche di design della bandiera, come la manipolazione delle immagini banner e l'allineamento.
  • banner a rotazione possono essere immagini che includono collegamenti ipertestuali e possono includere molte funzionalità HTML e funzioni.
  • Quando si utilizzano più istruzioni condizionali, considerare l'utilizzo di else if invece di ripetere, se dichiarazioni.
  • Usare sempre buone tecniche di pagina-programmazione durante la rotazione banner per evitare di sovraccaricare l'utente e nulla togliere messaggio principale della pagina Web.