Javascript Countdown Help.

@hsfcpOct 25.2007

Hey everyone.

I’m new to js and I have a few questions and maybe you can help.

What I want to do is two-fold, and to you guys, it may seem ridiculously easy, but to me, not at all.

I want a countdown display that repeats when it’s finished. Meanwhile, when that’s done, the date will count up one.

For example, something like this:

Order within (countdown to 12:00) PM, and have your order shipped by (Date of whatever day it is).

And when that completes, it repeats its process, and obviously the date goes to the next day.

Is this possible? And if so, where should I begin, or even better, if a script like this is floating around. I’ve tried looking for a couple of days.

Thanks for your time.

to post a comment

JavaScript

14 Comments(s) _↴

@vwphillipsOct 25.2007 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 
 var ToDay=new Date();
 var DeadLine=12;
 
 function Shipped(id){
 var month=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 var day=['Su','Mon','Tue','Wed','Thu','Fri','Sat'];
 var midday=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate(),DeadLine);
 var shipped=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate()+((ToDay>midday)?1:0))
 document.getElementById(id).innerHTML=day[shipped.getDay()]+' '+shipped.getDate()+'-'+month[shipped.getMonth()]+'-'+shipped.getFullYear();
 }
 /*]]>*/
 </script></head>
 
 <body onload="Shipped('Ship');setInterval(function(){ Shipped('Ship'); },1000);">
 <div id="Ship" ></div>
 </body>
 
 </html>[/CODE]

@KorOct 25.2007 — #Well, hm, I guess that you need a steady time reference, and that should be the server clock not the user's clock. For instance, if your page is (and the server accepts) PHP, the Vic's modified code could be:

<i>
 </i>var sDateArr='&lt;? print date("Y/n/d/H", time())?&gt;'.split('/');
 var ToDay=new Date(Number(sDateArr[0]),Number(sDateArr[1])-1,Number(sDateArr[2]),Number(sDateArr[3]));

@hsfcpauthorOct 26.2007 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 [/QUOTE]
 Awesome, thank you.
 
 But how do I make an hour/ minute countdown to add to it?  And is it in universal time as well?
 
 Basically it should be something like:
 
 Order in the next 1 hour and 20 mins to have your order shipped by October 26th 2007.

@hsfcpauthorOct 26.2007 — #Well, hm, I guess that you need a steady time reference, and that should be the server clock not the user's clock. For instance, if your page is (and the server accepts) PHP, the Vic's modified code could be:

<i>
 </i>var sDateArr='&lt;? print date("Y/n/d/H", time())?&gt;'.split('/');
 var ToDay=new Date(Number(sDateArr[0]),Number(sDateArr[1])-1,Number(sDateArr[2]),Number(sDateArr[3]));

[/QUOTE]

Awesome, but where would I put this in the script?

Thank you!

@KorOct 26.2007 — #Awesome, but where would I put this in the script?

Thank you![/QUOTE]
You have answered yourself. In the script ?

@vwphillipsOct 26.2007 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 
 var ToDay=new Date();
 var DeadLine=12;
 
 function Shipped(id){
 document.getElementById(id).innerHTML='';
 var month=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 var day=['Su','Mon','Tue','Wed','Thu','Fri','Sat'];
 var midday=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate(),DeadLine);
 var min=Math.floor((midday-new Date())/(1000*60));
 if (min>0){
 var hour=Math.floor(min/60);
 document.getElementById(id).innerHTML='Order within '+hour+':'+Math.floor(min-hour/60)+' minutes for delivery by<br>';
 }
 var shipped=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate()+((ToDay>midday)?1:0))
 document.getElementById(id).innerHTML+=day[shipped.getDay()]+' '+shipped.getDate()+'-'+month[shipped.getMonth()]+'-'+shipped.getFullYear();
 }
 /*]]>*/
 </script></head>
 
 <body onload="Shipped('Ship');setInterval(function(){ Shipped('Ship'); },1000);">
 <div id="Ship" ></div>
 </body>
 
 </html>[/CODE]

@KorOct 26.2007 — #Vic... haven't you read our posts? :-)

@hsfcpauthorOct 26.2007 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 [/QUOTE]
 
 This is what I get when I look at it:
 
 Order within 2:143 minutes for delivery by
 Fri 26-Oct-2007
 
 Which is great, except, I don't understand the three digit minute thing.  Is there a way to fix this?
 
 Thanks so much for your help!

@KorOct 26.2007 — #Tell me, do you need something similar with what I have done here:

?

- see the 2nd box on the right under the title "Cumpara acum" (which in Romanian means Buy Now)

It's a marketing technique of limited time promotion. Do you need something similar?

@hsfcpauthorOct 26.2007 — #Tell me, do you need something similar with what I have done here:

?

- see the 2nd box on the right under the title "Cumpara acum" (which in Romanian means Buy Now)

It's a marketing technique of limited time promotion. Do you need something similar?[/QUOTE]

Yes, very similar. But it's a daily countdown for shipping.

Like this:

www.endless.com (top right)

It needs to be able to reset daily.

Nice site, btw.

@vwphillipsOct 26.2007 — #Order within 2:143 minutes for delivery by

Fri 26-Oct-2007
[/QUOTE]
typo I'm afraid

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 
 var ToDay=new Date();
 var DeadLine=19;
 
 function Shipped(id){
 document.getElementById(id).innerHTML='';
 var month=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 var day=['Su','Mon','Tue','Wed','Thu','Fri','Sat'];
 var deadline=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate(),DeadLine);
 var min=Math.floor((deadline-new Date())/(1000*60));
 if (min>0){
 var hour=Math.floor(min/60);
 document.getElementById(id).innerHTML='Order within '+zxcFormat(hour)+':'+zxcFormat(Math.floor(min-hour*60))+' minutes for delivery by<br>';
 }
 var shipped=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate()+((ToDay>deadline)?1:0))
 document.getElementById(id).innerHTML+=day[shipped.getDay()]+' '+shipped.getDate()+'-'+month[shipped.getMonth()]+'-'+shipped.getFullYear();
 }
 
 function zxcFormat(nu){
 return (nu<10)?'0'+nu:nu;
 }
 /*]]>*/
 </script></head>
 
 <body onload="Shipped('Ship');setInterval(function(){ Shipped('Ship'); },1000);">
 <div id="Ship" ></div>
 </body>
 
 </html>[/CODE]

or perhaps

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 
 var ToDay=new Date();
 ToDay=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate(),ToDay.getHours());
 // this simulates a server date of +1 hour
 var ServerDate=new Date(ToDay.getFullYear(),ToDay.getMonth(),ToDay.getDate(),ToDay.getHours()+1);
 var DeadLine=22;
 
 function Shipped(id){
 document.getElementById(id).innerHTML='';
 var month=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 var day=['Su','Mon','Tue','Wed','Thu','Fri','Sat'];
 var deadline=new Date(ServerDate.getFullYear(),ServerDate.getMonth(),ServerDate.getDate(),DeadLine,(ServerDate-ToDay)/1000/60);
 var min=Math.floor((deadline-new Date())/(1000*60));
 if (min>0){
 var hour=Math.floor(min/60);
 document.getElementById(id).innerHTML='Order within '+zxcFormat(hour)+':'+zxcFormat(Math.floor(min-hour*60))+' minutes for delivery by<br>';
 }
 var shipped=new Date(ServerDate.getFullYear(),ServerDate.getMonth(),ServerDate.getDate()+((ServerDate>deadline)?1:0))
 document.getElementById(id).innerHTML+=day[shipped.getDay()]+' '+shipped.getDate()+'-'+month[shipped.getMonth()]+'-'+shipped.getFullYear();
 }
 
 function zxcFormat(nu){
 return (nu<10)?'0'+nu:nu;
 }
 
 /*]]>*/
 </script></head>
 
 <body onload="Shipped('Ship');setInterval(function(){ Shipped('Ship'); },1000);">
 <div id="Ship" ></div>
 </body>
 
 </html>[/CODE]

@hsfcpauthorOct 26.2007 — #typo I'm afraid

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 
 [/QUOTE]
 
 Thanks, they both sorta work.  I just have two questions:  How can I make it a universal time?  Like for example, it needs to be on EST for each client.  Is it possible to pull that from my server's clock?
 
 And how can I get rid of the 0 before every single digit hour? 
 
 Very similar to this:
 
 www.endless.com
 
 Thanks again!

@vwphillipsOct 26.2007 — #How can I make it a universal time? [/QUOTE]

I'm not really into time(I should have left it alone to begin with, but it was unanswered for 6 hours so I tried to help)

but anyway you have the instructions to use the server time(using PHP)

and the second script in my last post simulates this

so the time is adjusted for the difference between your servers time and the users local time.

further adjustments are required if the servers time is different from your local time.

get rid of the 0 before every single digit hour?[/QUOTE]

[CODE]
 .....
 if (min>0){
 var hour=Math.floor(min/60);
 document.getElementById(id).innerHTML='Order within '+(hour)+':'+zxcFormat(Math.floor(min-hour*60))+' minutes for delivery by<br>';
 }
 ....
 [/CODE]

@hsfcpauthorOct 27.2007 — #I really appreciate you guys trying to help. I'm still not getting exactly what I need, however.

If anybody else wants to take a stab at it, please do. I'd really appreciate it.

Again it's a countdown based off the Server's time that counts down to noon. Once it hits noon, it resets and counts down to noon again.

So for example it's now 10:38 EST so it would be

Order within 13:22 and have your order shipped by October 27, 2007, where the latter date is the day OF that specific noon. Once it hits noon, it will count down to the NEXT day's noon. And so on and so on.

Thanks again.

Also in #JavaScript _↴

Swapping URl's in a timed refresh How should I make a online document review app how a variable’s type can be changed on-the-fly.

Success!

Help @hsfcp spread the word by sharing this article on Twitter...

Tweet This

Javascript Countdown Help.

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript Countdown Help.

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴