WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Making A Countdown Timer

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Making A Countdown Timer on Thu Jun 03, 2010 7:38 am

Fred100


Registered Member
Registered Member

Making A Countdown Timer
Learn how to make a countdown timer



G'day everyone , It's my Second tutorial now Wink
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 Razz , 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 Wink, 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 Wink

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by Fred100 on Sat Jun 05, 2010 3:44 am; edited 1 time in total

http://www.art-castle.biz/forum.htm

2Accespted Re: Making A Countdown Timer on Thu Jun 03, 2010 8:16 am

Joel


Registered Member
Registered Member
GREAT! Good tutorial Fred!

http://www.advertisehotspot.info/

3Accespted Re: Making A Countdown Timer on Thu Jun 03, 2010 8:52 am

Fred100


Registered Member
Registered Member
Thanks Joel , I hope it'd be accepted Smile

http://www.art-castle.biz/forum.htm

4Accespted Re: Making A Countdown Timer on Thu Jun 03, 2010 1:51 pm

madman


Registered Member
Registered Member
Nice work Fred!!

http://www.sports-chat.forumotion.com/index.htm

5Accespted Re: Making A Countdown Timer on Mon Jun 07, 2010 10:26 am

Fred100


Registered Member
Registered Member
Umm , I just hope it's good enough to go?
Lol I'm sort of getting impatient about it lol!

http://www.art-castle.biz/forum.htm

6Accespted Re: Making A Countdown Timer on Mon Jun 07, 2010 8:23 pm

ankillien


Administrator
Administrator
Nice tutorial Very Happy
Thanks for your contribution.

Tutorial Accepted

7Accespted Re: Making A Countdown Timer on Mon Jun 07, 2010 8:42 pm

Fred100


Registered Member
Registered Member
Yay yay yay!!
Second tutorial , and it's all good to go!
I'll get onto making the third one now! Razz
*takes pencil and a paper and draws mickey mouse*

http://www.art-castle.biz/forum.htm

8Accespted Re: Making A Countdown Timer on Fri Dec 23, 2011 9:56 pm

RSguideMaker


Registered Member
Registered Member
Using the forums, is it possible to actually use the timer on a post?

http://techtalk.3owl.com/

9Accespted Re: Making A Countdown Timer on Fri Dec 23, 2011 9:57 pm

RSguideMaker


Registered Member
Registered Member
Fred100 wrote:Yay yay yay!!
Second tutorial , and it's all good to go!
I'll get onto making the third one now! Razz
*takes pencil and a paper and draws mickey mouse*


Lol @ the Mickey Mouse drawing

http://techtalk.3owl.com/

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Making A Countdown Timer

Permissions in this forum:
You cannot reply to topics in this forum