Modifying countdown script to end at specific hour instead of day
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:
Code:
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:
More ancient code (from Javascript Kit! ) Try this instead:-
Code:
<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.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Last edited by Philip M; 12-20-2011 at 09:33 AM..
Reason: iImproved
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 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.
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 %>.
Code:
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 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:
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.
Before you post, read our: 
) Try this instead:-
