Har også lyst til at lave en lille guide.
For at kunne udføre denne guide uden store problemer bør i kende til HTML, og måske en smule javascript. Vi starter med at oprette vores html dokument:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lav en countdown med JavaScript</title>
<script language="javascript" type="text/javascript">
// Her skal vores javascript være.
</script>
</head>
<body>
<h1>Javascript Tutorial</h1>
<br />
<span style="font-size:11px;">Her skriver vi en lille tekst og indsætter vores counter her: <span id="countDown1">30</span></span>
</body>
</html>
Det er vigtigt at vi giver vores "counter" et
id da vi ellers får problemer med at ændre sekunderne
Efter som i kender til html burde i ikke have de store problemer med det ovenstående "kode" så jeg undlader at bruge mere tid på den.
Jeg springer videre til der hvor vores javascript begynder
Vi starter med at initialisere nogle variabler:
var countDown1TimeRemaining = 30; // Vi sætter vores counter til 30 sekunder.
var countDown1Timer = 0;
Dette skal selvfølgelig stå i vores <script> blok
Så skal vi have oprettet vores funktion som skal få timeren til at tælle ned det gør vi med
function
function countDown1() { // vores function kræver ingen parameter derfor skriver vi ikke noget i ()
var spanCountDown1 = document.getElementById("countDown1"); // vi sætter spanCountDown1 til at referere til vores <span id="countDown1"></span>
// Så minus'er vi vores timeremaining variable med 1 (sekund)
countDown1TimeRemaining--;
// og sætter derefter vores span til den nye værdi
spanCountDown1.innerHTML = countDown1TimeRemaining;
// Nu skal vi så checke om vores timer er nået ned på nul det gør vi med en IF
if (countDown1TimeRemaining == 0) { // hvis den er
// annuller timeren (NB! vi sætter den brugte variable countDown1Timer om lidt.)
clearInterval(countDown1Timer);
// Nu skal vi så indsætte vores "payload"/"action" det kunne f.eks være alert, men jeg vælger at kalde til en funktion som vi opretter lige om lidt.
countDown1Payload();
}
}
Så langt så godt, jeg har prøvet at skrive nogle kommentare inde i scriptet så det er nemmere at forstå. Vi laver lige hurtigt vores "payload" med function også.
function countDown1Payload() {
//Her kan du indsætte javascript kode som gør alt muligt
// Det kunne f.eks være gå videre til en anden side med location.href = 'http://www.testmax.dk';
// Eller vi kan lave en besked boks med alert('Din besked skal stå her');
location.href = 'http://www.testmax.dk';
}
Men vi har endnu ikke lavet vores timer endnu så scriptet virker ikke endnu
Det vælge jeg at gøre i <body> tagget så
<body>
skal udskiftes med:
<body onLoad="countDown1Timer = setInterval('countDown1();',1000);">
Onload udføres når browseren indlæser dokumentet og sætter en "timer" igang der kører countDown1(); hver 1.sek og referere til den i countDown1Timer som vi bruger til at stoppe timeren med når tiden er gået.
Scriptet er testet her og virker både i Firefox og internet explorer 7.0 uden fejl.
Håber i kunne bruge det til noget.