G'day everyone , It's my Second tutorial now 
Okay , so today we're gonna learn "How to create a Countdown Timer".
And as we know , the main thing needed for a Html Page is
- Code:
<html>
<head>
<title>The Title</title>
</head>
<body>
<h1>The Header</h1>
<p>The Paragraph needed for the page.</p>
</body></html> Alright so , we're gonna add stuff to our Page , and that is ,
1. The Title
- Code:
<title>The Title</title> For explaining you guys , I've just added it as "The Title" , You can change it to whatever suits you , or just add like Countdown , or anything like that , depends on you , or you can just leave it blank lol
2. The Head (The main part)
Now , as we know , that the head start above the title and ends below it , right? , Oh c'mon , don't scratch your head! , see above  , so here is what we have , AND DO PAY ATTENTION AS IT IS THE MOST IMPORTANT PART!
Here it is ,
- Code:
<head>
<title>The Title</title>
<script language="javascript" type="text/javascript">
today = new Date();
todayEpoch = today.getTime();
target = new Date("6 March, 2011");
targetEpoch = target.getTime();
daysLeft = Math.floor(((targetEpoch - todayEpoch) / (60*60*24)) / 1000);
</script>
</head>
Now you might be wondering what's up with that script thingy? Right? Yeah , I thought so...haha
This is the script which WILL do the countdown so PAY ATTENTION because a slight mistake might result in not working of it, So No typos or any mistakes , clear?
so the script goes like this , and it has to be added in the header in order to work.
- Code:
<script language="javascript" type="text/javascript">
today = new Date();
todayEpoch = today.getTime();
target = new Date("6 March, 2011");
targetEpoch = target.getTime();
daysLeft = Math.floor(((targetEpoch - todayEpoch) / (60*60*24)) / 1000);
</script> The - Code:
target = new Date("6 March, 2011"); Is the part which is the time till the countdown would run , the - Code:
new Date("6 March , 2011"); is the date which you can modify to any you like , and as a example I added My B'day's date.
3. The Body
So the Body is gonna be something which the people are gonna see , so here is how it is
- Code:
<body>
<h1>Fred100's B'day Starts in
<script>document.write(daysLeft);</script>
days! Don't forget to wish him!
</h1>
</body> The things between - Code:
<h1></h1> will be another important thing needed , and you can modify it , For Ex- Wait till "XXX(1)" days for "XXX(2)"! , in which the XXX(1) would be the day(s) & XXX(2) can be your event , and the - Code:
<script>document.write(daysLeft);</script> Is the thing which is gonna be the amount of days till the event , and all I can say for it is , Copy & Paste because there is not much to explain in this part!
So if you've followed it carefully then your page should looks like this
- Code:
<html>
<head>
<title>The Title</title>
<script language="javascript" type="text/javascript">
today = new Date();
todayEpoch = today.getTime();
target = new Date("6 March, 2011");
targetEpoch = target.getTime();
daysLeft = Math.floor(((targetEpoch - todayEpoch) / (60*60*24)) / 1000);
</script>
</head>
<body>
<h1>Fred100's B'day Starts in
<script>document.write(daysLeft);</script>
days! Don't forget to wish him!
</h1>
</body>
~Preview~
http://art-castle-test.forumotion.com/Countdown_test-h1.htm
And a quick shout-out
Latchy , thanks a ton for helping me out with that countdown script you provided to me , if you wouldn't have given me that script,then I wouldn't have been curious enough to look through them to figure it all out like this , so I owe you one for that!
Thanks for reading the tutorial , I just hope I helped
|
Home
Making A Countdown Timer Thu Jun 03, 2010 9:08 am
