Hvordan Roter en JS Banner

Hvordan Roter en JS Banner


Et banner rotator er et lite stykke programvare som tilfeldig roterer annonsene brukerne ser på en webside. Banner rotasjon er gunstig for annonsører, siden det vanligvis koster mindre å sponse en delvis annonse i motsetning til en full annonse på en webside. Roterende bannere nytte webside eiere, siden de kan dra nytte av flere annonseringsmuligheter. Bannere er vanligvis roteres når en bruker oppdaterer siden, og annonsene kan vises basert på en rekke forhåndsinnstilte parametre som tid, ukedag eller vise prosentandel.

Bruksanvisning

1 Åpne en teksteditor og opprette en ny tekstfil kalt "random_banner.html". For å opprette en ny fil i et tekstredigeringsprogram, velg "New" fra "Fil" -menyen.

2 Legg noen grunnleggende HTML-koder til filen. Inkluder følgende koder: <html>, <head> </ head> <body> </ body> og </ html>.

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

3 Rediger random_banner.html og legge til en <script> tag mellom <head> og </ head> taggene. Tilordne <script> tagge en type egenskap av "text / javascript" og legge til en </ script> -koden til å indikere manuset slutten. All tekst plasseres mellom <script> og </ script> tagger vil bli tolket som Javascript-kode.

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

4 Legg en Javascript-funksjon kalt bannerRotate () mellom <script type = "text / javascript"> og </ script> koder. Følg funksjonsnavnet med et sett av klammeparentes ( "{}") for å indikere funksjonskoden plassering.

fungere bannerRotate ()
{}

5 Deklarere en variabel som heter bannerTime mellom bannerRotate funksjonens klammeparentes. Sett bannerTime variabelen til returverdien av en Javascript math.random funksjon. Den math.random funksjonen returnerer et tilfeldig tall mellom 0 og 1.

bannerTime = Math.random ();

6 Bruk tre document.write metoder og tre betinget utsagn for å rotere en av tre bannere på siden. Den første banneret skal vises 25 prosent av tiden (Banner 1), bør det andre banneret skal vises 50 prosent av tiden (Banner 2) og den tredje banneret skal vises 25 prosent av tiden (Banner 3). Plasser den betingede koden direkte etter bannerTime variabeldeklarasjon mellom bannerRotate () funksjonens klammeparentes.

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 Legg en andre <script> tag mellom random_banner.html s <body> og </ body> koder. Som før, tilordne <script> tagge en type egenskap av text / javascript og lukke </ script> tag.

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

8 Ring bannerRotate () -funksjonen ved å plassere funksjonsnavnet mellom andre <script type = "text / javascript"> og </ script> koder. Etter å ha gjennomført trinn 8, bør random_banner.html ut som vist nedenfor. Lagre og lukk random_banner.html.

<Html>
<Head>
<Script type = "text / javascript">
fungere 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 Åpne banner_rotate.html i en nettleser. Hit leseren oppdateringsknappen et par ganger for å bekrefte at banneret roterer som angitt i den betingede kode (Banner 1: 25 prosent, Banner 2: 50 prosent, Banner 3: 25 prosent).

Hint

  • Bannere kan roteres på websider basert på noen tidsplan, inkludert den dagen i uken, helst på dagen eller vise frekvens.
  • Mange kommersielle banner rotatorer er tilgjengelig som gir en rekke ekstra banner design funksjoner, som for eksempel banner bildemanipulering og justering.
  • Roterende bannere kan være bilder som inneholder hyperkoblinger, og kan inneholde mange HTML-funksjoner.
  • Når du bruker flere betinget utsagn, vurdere å bruke andre hvis uttalelser i stedet for å gjenta hvis uttalelser.
  • Bruk alltid god side-programmering teknikker når roterende bannere for å unngå overbelastning av brukeren og avvike fra websiden hovedbudskap.