I have a javascript counter installed at http://www.fredericknewspost.com/ (right side of the page). I'm no javascript expert, so I just tried to find and modify an existing script. It looks fine, except for one strange issue...
Every once in a while, the countdown will list the amount of time left as X number of days, 24 hours, etc.. Of course, it should say 23 hours and adjust the number of days, instead.
Now, I need this counter to terminate on February 6, 2012 at 6:00am. The only thing I changed was to add +6 to the hours (since the counter was terminating at midnight). Could this be causing the issue? If so, how can I correct this?
Any help is greatly appreciated!
Code:
<!-- javascript countdown -->
<style type="text/css">
.unit {
font-size: 10px;
}
.countdown_num {
font-size: 30px;
}
.countTD {
width: 70px;
height: 70px;
text-align: center;
color: white;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
background: url('images/digit.png') no-repeat right top;
}
</style>
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<div style="background-color:white;border:1px black solid;">
<br />
<strong>You asked, we listened.</strong><br /><br />
<img src="images/small_FNP_logo.png" width="250" height="23" alt="Frederick News-Post logo" />
<table cellpadding="0" cellspacing="0" border="0" width="280">
<!--<div id="counter" class="counter">-->
<tr class="countdown">
<td class="countTD" valign="middle"><div class="countdown_num" id="countdown_day"></div><div class="unit">Days</div></td>
<td class="countTD" valign="middle"><div class="countdown_num" id="countdown_hour"></div><div class="unit">Hours</div></td>
<td class="countTD" valign="middle"><div class="countdown_num" id="countdown_min"></div><div class="unit">Minutes</div></td>
<td class="countTD" valign="middle"><div class="countdown_num" id="countdown_sec"></div><div class="unit">Seconds</div></td>
</tr>
</div>
<div id="expired" style="display:none;">
The deadline has passed.
</div>
<script type="text/javascript">
/*
Countdown Timer
Based on the "Count down until any date script" - By JavaScript Kit (www.javascriptkit.com)
Author: (c) 2009 Elbert Bautista
URL: http://www.egTheBlog.com
Licence : Open Source MIT Licence
*/
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 + 6)
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)
}
}
var deadline=new Date();
deadline.setDate(deadline.getDate()+5);
var deadlineYear = deadline.getYear();
if (deadlineYear < 1000)
deadlineYear+=1900
//enter the count down date using the format year/month/day
//countdown(2011,12,27);
countdown(2012,02,06);
</script>
</table>
<br />
</div>
<br />
</td>
</tr>
</table>
<!-- /javascript countdown -->
How about a new countdown timer, with hours/minutes/seconds?
Anyone who comments on my use of setTimeout will be ignored
Enjoy.
By that you mean me. Seriously, bad programming and you should take the time to use the timer events properly.
When you do the math, your clock or timing will be lagging behind true time.
If you want a timer to terminate at a specific time, you need to first off get the futureTimeRef
Code:
rfcDate = "6 Feb 2012 06:00:00"; //
futureTime = new Date( rfcDate ).getTime();
function countDown(){
if(timeEvent){
if(diff>0){
now = new Date().getTime();
diff = futureTime - now;
diff /= 1000; // seconds
diff /= 60; // minutes
diff /= 60; // hours
diff /= 24; // days
diff /= 7; // weeks
}
if(diff<=0){
msg = "Out of Time";
clearInterval( timeEvent );
}
if(diff>1) msg = "Time left = " + diff;
window.status = "<<< "+msg+" >>>";
}// end of if
}// end of function
timeEvent = setInterval(countDown,1000);
No big and fancy scripts, just raw basic stuff that illustrates how you can obtain the same results as the long winded script by simplifying the program and also using the setInterval properly.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
Indeed, And you took it hook, line and sinker. And although your comment isn't really fit for a reply I'm going to anyway.
Originally Posted by JunkMale
Seriously, bad programming and you should take the time to use the timer events properly.
This is a matter of preference, and I chose not to. I use setInterval/setTimeout where and when I feel it is appropriate. How I have used it will not cause programmatic issues in this case.
Originally Posted by JunkMale
When you do the math, your clock or timing will be lagging behind true time.
That is completely untrue in this scenario. I have already calculated when the timer should end. Only then, in the loop, do I work out the difference between them using the CURRENT time... so it cannot be incorrect, even if I had a timer looping at 2 second intervals or more.
Originally Posted by JunkMale
Code:
rfcDate = "6 Feb 2012 06:00:00"; //
futureTime = new Date( rfcDate ).getTime();
function countDown(){
if(timeEvent){
if(diff>0){
now = new Date().getTime();
diff = futureTime - now;
diff /= 1000; // seconds
diff /= 60; // minutes
diff /= 60; // hours
diff /= 24; // days
diff /= 7; // weeks
}
if(diff<=0){
msg = "Out of Time";
clearInterval( timeEvent );
}
if(diff>1) msg = "Time left = " + diff;
window.status = "<<< "+msg+" >>>";
}// end of if
}// end of function
timeEvent = setInterval(countDown,1000);
No big and fancy scripts, just raw basic stuff that illustrates how you can obtain the same results as the long winded script by simplifying the program and also using the setInterval properly.
I'm not even sure what you were trying to prove with this code. I am wondering if you even read or understood the code that I posted?
Why not at least give examples that actually work so I don't have to fix them first to see what you're on about.
Sure you can calculate to a number like that in your code, but I needed to extract certain points of time to display it properly.
Btw, there is such a thing as variable declaration ( var x = 0; ).
So Before you comment on my bad programming you should maybe take a look at your own first.
Indeed, And you took it hook, line and sinker. And although your comment isn't really fit for a reply I'm going to anyway.
This is a matter of preference, and I chose not to. I use setInterval/setTimeout where and when I feel it is appropriate. How I have used it will not cause programmatic issues in this case.
That is completely untrue in this scenario. I have already calculated when the timer should end. Only then, in the loop, do I work out the difference between them using the CURRENT time... so it cannot be incorrect, even if I had a timer looping at 2 second intervals or more.
I'm not even sure what you were trying to prove with this code. I am wondering if you even read or understood the code that I posted?
Why not at least give examples that actually work so I don't have to fix them first to see what you're on about.
Sure you can calculate to a number like that in your code, but I needed to extract certain points of time to display it properly.
Btw, there is such a thing as variable declaration ( var x = 0; ).
So Before you comment on my bad programming you should maybe take a look at your own first.
bionoid
And your reply does deserve comment.
var is to initialize a variable in a local scope meaning that it is not global. Picking fault on something like that is petty. Claiming my code does not work is also petty on your part and attempting to draw me in to a flame war is just as juvenile. I had 'the code' running in my browser before posting it, so what did you fix? What browser did you use, anything you can report helps people following this thread in the future.
I quite rightly point out a valid reason for the use of the setInterval and how it should be used and if you had bothered to search the internet for this setTimeout usage issue, you would possibly understand the issue.
As for me doing the running around providing you or anyone else with proof, think again.
As for your code, I am not knocking your code so don't get your nose all bent, I am criticizing your use of an interval timer and anyone reading the thread can decide themselves if they want to follow bad programming practice or not.
Ciao.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
var is to initialize a variable in a local scope meaning that it is not global. Picking fault on something like that is petty. Claiming my code does not work is also petty on your part and attempting to draw me in to a flame war is just as juvenile. I had 'the code' running in my browser before posting it, so what did you fix? What browser did you use, anything you can report helps people following this thread in the future.
NOT declaring your variables, global or local, is an even worse programming habbit in my opinion. I recommend you sort your code out before bothering to submit more.
Errors were reported in FireFox, and attached for your enjoyment.
What did I do to fix it? I just declare your variables, amazing huh.
Honestly, I don't want to start a flame war either, but I am certain your time could be better spent being more constructive and less critical.
NOT declaring your variables, global or local, is an even worse programming habbit in my opinion. I recommend you sort your code out before bothering to submit more.
Errors were reported in FireFox, and attached for your enjoyment.
What did I do to fix it? I just declare your variables, amazing huh.
Honestly, I don't want to start a flame war either, but I am certain your time could be better spent being more constructive and less critical.
A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function. (the variable has local scope).
You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared.
Local variables are destroyed when you exit the function.
You will see arguments all over the internet on its use or not to use, that var be the question. Once you understand how it works, then you see why it is used within a function or within the main program and why its useful to use it and when its useful not to use it.
You will find that this principle in many other programming languages, although called different things, you find that the classes declared in other structured languages can be declared as public or private.
As for firefox, that shouldn't happen. ECMA Script page 62 gives the spec on var and variable and this alone should show that firefox isn't compliant because it is not rendering script as per ECMA Specs.
Doesn't work in FF8 or FF9 and it should! Works fine in Opera and MSIE8 and tried it in Chrome and can not determine if its working because the output goes to a status bar that chrome which is not supported despite the window.status object existing. Looking on googls chromes help FAQ, they claim that its no longer supported..? Who put google in charge? Yet another string to add to the bow of why I don't like Google's Chrome (like M$ a leopards spots don't change).
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
There no differences between setTimout and setInterval since the time is worked out again. In both cases the calculation time put a delay (less as a second) of the clock ! it's not the same case when we try to display the server time...
«The status property does not work in the default configuration of IE, Firefox, Chrome, or Safari.» (W3cScholls.com) A very old code to put in the trash can !
Reply With Quote
Originally Posted by 007Julien
Bookmarks