Modifying countdown script to end at specific hour instead of day

forcedtriple

12-20-2011, 04:59 AM

Hi everyone,

I have a countdown script I'd like to modify so that the countdown ends at a specific hour, and not on a particular day at midnight. I'm new to coding (Ruby), so still trying to get the hang of Javascript:

var current="Expired"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d){
theyear=yr;themonth=m;theday=d
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[m-1]+" "+d+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday==0&&dhour==0&&dmin==0&&dsec==1){
document.getElementById('counter').style.display='none';
document.getElementById('expired').style.display='block';
return
}
else{
document.getElementById('countdown_day').innerHTML=dday;
document.getElementById('countdown_hour').innerHTML=dhour;
document.getElementById('countdown_min').innerHTML=dmin;
document.getElementById('countdown_sec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday)",1000)
}
}

//MODIFY THIS LINE: enter the count down date using the format year/month/day
//e.g. countdown(2009, 03, 23);
countdown(2011, 12, 24);

I've tried to play with it by changing the following in green:

function countdown(yr,m,d,h){
theyear=yr;themonth=m;theday=d;thehour=h
.
.
.
setTimeout("countdown(theyear,themonth,theday,thehour)",1000)
.
.
countdown(2011, 12, 24, 10)

But I don't seem to be getting anywhere.

Any tips or pointers to push me in the right direction is much appreciated.

Thanks!

Philip M

12-20-2011, 07:44 AM

More ancient code (from Javascript Kit! :eek:) Try this instead:-

<html>
<head>

<script type = "text/javascript">

var timeInSecs;
var ticker;
var BigDay;

function startTimer(){
var today = new Date();
BigDay = new Date("December 23, 2011 18:00:00"); // specific date and time hh:mm:ss
timeInSecs = parseInt((BigDay.getTime() - today.getTime())/1000);
if (timeInSecs < 0) {
document.getElementById("countdown").innerHTML = "The offer has now expired";
return false;
}
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away
}

function tick() {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
document.getElementById("countdown").innerHTML = "The offer has now expired";
}

var days = Math.floor(secs/86400);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;

var result = hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds
result = days + " days " + result;
document.getElementById("countdown").innerHTML = "Time remaining until the offer expires = " + result;
}

</script>

</head>

<body onload = "startTimer()">

<span id="countdown" style="font-weight: bold;"></span>

</body>
</html>

"I think there is a world market for maybe five computers." — Thomas Watson, chairman of IBM, 1943.

forcedtriple

12-21-2011, 04:10 AM

Hi Philip,

Thanks so much for the quick reply and for writing an entirely new script.

Forgive the beginner question -- I've put the entire code into a blank html file to see how it works and to tinker from there, but don't actually see the countdown (it's a blank page).

I'm assuming that this line:

<span id="countdown" style="font-weight: bold;"></span>

in the body is where the following line should render, depending on whether the countdown has expired or not:

innerHTML = "Time remaining until the offer expires = " + result;

But nothing is showing in the HTML file.

I'm sure it's something basic I've missed.

Thanks again for the help!

Philip M

12-21-2011, 08:56 AM

Sorry, mea culpa, due to a copying error one line of the script was incomplete and I did not notice as it is off the screen.

var result = hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";

Correct that and it will work! Shows how a tiny error will cause total disaster!

forcedtriple

12-22-2011, 08:04 AM

Brilliant, thanks so much! Tinkering with it now to fit within the image countdown I had previously...thanks again!

forcedtriple

01-05-2012, 03:12 PM

Hi Philip (or anyone else with expertise),

I just realised that the timer counts down to client-side time. Is there a way to modify the code so that there is an offset, so it can grab the server time adjust the countdown accordingly?

That would give an absolute countdown function, which is what I'm attempting to do.

Thanks for the help!

forcedtriple

01-05-2012, 03:36 PM

I've played around with this a little, any input as to whether I'm on the right track? I'm pulling the server time (my app is written in Ruby) using the helper <%= expiry_date_time %>.

function startTimer(){
var today = new Date();
var serverTime = new Date("<%= expiry_date_time %>");
var modify_to_client_time = serverTime.getTimezoneOffset();
var localtime = ?(not sure);
var expirationTime = localtime*60*modify_to_client_time;
BigDay = new Date(expirationTime);
timeInSecs = parseInt((BigDay.getTime() - today.getTime())/1000);
if (timeInSecs < 0) {
document.getElementById("countdown").innerHTML = "The offer has now expired";
return false;
}
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away

Thanks!

Philip M

01-05-2012, 04:17 PM

http://www.javascriptkit.com/script/script2/servertime.shtml

or specify the BigDay in UTC time.

forcedtriple

01-06-2012, 04:48 PM

Thanks for the help Philip! You pointed me in the right direction -- I was quite confused about the relative nature of time versus what was on my server, but figured it out in the end.

In case others stumble upon this as well, here's what I did:

var today = Date.UTC(<%= current_time_on_server %>);
BigDay = Date.UTC(<%= time_to_expire_fixed_on_server %>);

The rest of Philip's code is still intact. What I wasn't realising was that the code finds the difference between the BigDay and today variables, and then just counts down between them. The rub is that the countdown only begins when the browser is loaded!

So I set BigDay as a variable that pulled the expiration time directing from my server, and the start time (the today variable) as the current time on the server. So that gives an absolute start and end point despite where your user may browse from.

If you're using Ruby (like I am), Time.now works well, just use the strftime method to get it in the proper UTC format for Javascript.

Thanks again Philip!