Thread: Help Getting Countdown Script Working

1. Registered User
Join Date
Oct 2013
Posts
20

Help Getting Countdown Script Working

Hello All,

I'm trying to create a countdown script for my mother. She retires in a few years and is literally counting down the days. So I thought it would be nice to have a script so she can SEE exactly how much longer she has. I'm pretty new to JavaScript, but have managed to write several successful scripts, but this one is eluding me. Anyway, here is what I have so far, but can't seem to get it right. I can't even get past the months.

Her retirement date is August 31, 2017 at 5:00pm. I would like for it to display YY:MMD:HH:MM:SS.

If anyone can help, I would appreciate it. Thank you!!

Code:
function countretire(){

var today = new Date();
var ayears = today.getFullYear();
var amonths = today.getMonth();
var xmonths = today.getMonth();
var xdays = today.getDate();
var ahours = today.getHours();
var xhours = today.getHours();
var aminutes = today.getMinutes();
var xminutes = today.getMinutes();
var aseconds = today.getSeconds();
var xseconds = today.getSeconds();

if(aseconds) aseconds = 59 - aseconds;
if(xseconds == 0) aseconds = aseconds + 59;
if(aseconds <= 9) aseconds = "0" + aseconds;

if(aminutes) aminutes = 59 - aminutes;
if(xminutes == 0) aminutes = aminutes + 59;
if(aminutes <= 9) aminutes = "0" + aminutes;

if(ahours) ahours = ahours + 7;
if(ahours) ahours = 23 - ahours;
if(xhours >= 17) ahours = ahours - 1;
if(ahours <= 9) ahours = "0" + ahours;

if(xmonths == 0 && xhours >= 17) adays = adays - 1;

if(xmonths == 1 && xhours >= 17) adays = adays - 1;

if(xmonths == 2 && xhours >= 17) adays = adays - 1;

if(xmonths == 3 && xhours >= 17) adays = adays - 1;

if(xmonths == 4 && xhours >= 17) adays = adays - 1;

if(xmonths == 5 && xhours >= 17) adays = adays - 1;

if(xmonths == 6 && xhours >= 17) adays = adays - 1;

if(xmonths == 7 && xhours >= 17) adays = adays - 1;

if(xmonths == 8 && xhours >= 17) adays = adays - 1;

if(xmonths == 9 && xhours >= 17) adays = adays - 1;

if(xmonths == 10 && xhours >= 17) adays = adays - 1;

if(xmonths == 11 && xhours >= 17) adays = adays - 1;

if(amonths) amonths = amonths + 4;
if(amonths) amonths = 11 - amonths;
if(xmonths >= 7 && xdays >= 31 && xhours >= 17) amonths = amonths - 1;
if(amonths <= 9) amonths = "0" + amonths;

if(today){
dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + amonths + ":" + adays + ":" + ahours + ":" + aminutes + ":" + aseconds + "</span></b></font>";
}
var e = document.getElementById("countretire");
if(!e) return;
if("innerHTML" in e) e.innerHTML = dispElapsed;
setTimeout("countretire()", 1000);
}

2. Couldn't understand all those conditionals so I wrote this up as a bones script, you need to flesh it out and work on accuracy.
HTML 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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Time Warp...</title>

<script>
with(document){
displayOut={
Years:timeTracker.Years,
Months:timeTracker.Months,
Weeks:timeTracker.Weeks,
Days:timeTracker.Days,
Hours:timeTracker.Hours,
Minutes:timeTracker.Minutes,
Seconds:timeTracker.Seconds
}
}
// set the standard number of milliseconds in :-
stdMS = 1;
stdSecond = stdMS * 1000;	// 1 second as Milliseconds
stdMinute = stdSecond * 60;	// 1 minute 	--- " ---
stdHour = stdMinute * 60;	// 1 hour 		--- " ---
stdDay = stdHour * 24;		// 1 day 		--- " ---
stdWeek = stdDay * 7;		// 1 week 		--- " ---

stdYear = ((365 + 365.25 + 366) / 3) * stdDay; // get an average year
stdMonth = stdYear/12;		// 1 Month as Milliseconds

return (this<=9? "0":"") + this;
}

clock = {
id:[],
end:0,
update:function(){
var retirement = new Date(clock.end).getTime();
var now = new Date().getTime();

// difference is in milliseconds
var difference = retirement - now;

// calculate the number of years left.
var years = Math.floor(difference/stdYear);
difference -= years>0? years*stdYear : 0;

// calculate the number of months left
var months = Math.floor(difference/stdMonth);
difference -= months>0? months*stdMonth : 0;

// Calculate number of weeks
var weeks = Math.floor(difference/stdWeek);
difference -= weeks>0? weeks*stdWeek : 0;

var days = Math.floor(difference/stdDay);
difference -= days>0? days*stdDay : 0;

var hours = Math.floor(difference/stdHour);
difference -= hours>0? hours*stdHour : 0;

var minutes = Math.floor(difference/stdMinute);
difference -= minutes>0? minutes*stdMinute : 0;

// work out seconds fraction
var seconds = Math.floor(difference/stdSecond);
difference -= seconds>0? seconds*stdSecond : 0;

clock.id['timeWarp'].value = new Date(retirement).toUTCString();
clock.id['timeNow'].value = new Date(now).toUTCString();

},
setEnd:function(str){
this.end = str;
},
init:function(){
if( document.getElementById('timeWarp') &&
document.getElementById('timeNow')){
this.id['timeWarp']=document.getElementById('timeWarp');
this.id['timeNow']=document.getElementById('timeNow');
clearInterval(this.auto);
this.auto = setInterval("clock.update()",1000);
}
},
auto:setInterval("clock.init()",1000)

}

clock.setEnd("31 Aug, 2017  17:00:00 GMT");

</script>

<body>
<form id="timeTracker" name="timeTracker" method="post" action="javascript:;">
<label>Retirement on:-
<input type="text" id="timeWarp" name="timeWarp" value="" />
</label>
<label>Time now:-
<input type="text" id="timeNow" name="timeNow" value="" />
</label>
<tr>
<td>Years</td>
<td>Months</td>
<td>Weeks</td>
<td>Days</td>
<td>Hours</td>
<td>Minutes</td>
<td>Seconds</td>
</tr>
<tr>
<td><input id="Years" name="Years" type="text" size="8" maxlength="2" /></td>
<td><input id="Months" name="Months" type="text" size="8" maxlength="2" /></td>
<td><input id="Weeks" name="Weeks" type="text" size="8" maxlength="2" /></td>
<td><input id="Days" name="Days" type="text" size="8" maxlength="2" /></td>
<td><input id="Hours" name="Hours" type="text" size="8" maxlength="2" /></td>
<td><input id="Minutes" name="Minutes" type="text" size="8" maxlength="2" /></td>
<td><input id="Seconds" name="Seconds" type="text" size="8" maxlength="2" /></td>
</tr>
</table>
<p>&nbsp;</p>
</form>
</body>
</html>

3. Code:
clock = {
id:[],
end:0,
update:function(){
var retirement = new Date(clock.end).getTime();
var now = new Date().getTime();

var difference = retirement - now; // this is in milliseconds
if(difference>=0){
// calculate the number of years left.
var years = Math.floor(difference/stdYear);
difference -= years>0? years*stdYear : 0;

// calculate the number of months left
var months = Math.floor(difference/stdMonth);
difference -= months>0? months*stdMonth : 0;

// Calculate number of weeks
var weeks = Math.floor(difference/stdWeek);
difference -= weeks>0? weeks*stdWeek : 0;

var days = Math.floor(difference/stdDay);
difference -= days>0? days*stdDay : 0;

var hours = Math.floor(difference/stdHour);
difference -= hours>0? hours*stdHour : 0;

var minutes = Math.floor(difference/stdMinute);
difference -= minutes>0? minutes*stdMinute : 0;

// work out seconds fraction
var seconds = Math.floor(difference/stdSecond);
difference -= seconds>0? seconds*stdSecond : 0;
}
clock.id['timeWarp'].value = new Date(retirement).toUTCString();
clock.id['timeNow'].value = new Date(now).toUTCString();

},
setEnd:function(str){
this.end = str;
},
init:function(){
if( document.getElementById('timeWarp') &&
document.getElementById('timeNow')){
this.id['timeWarp']=document.getElementById('timeWarp');
this.id['timeNow']=document.getElementById('timeNow');
clearInterval(this.auto);
this.auto = setInterval("clock.update()",1000);
}
},
auto:setInterval("clock.init()",1000)

}
Minor addition to stop the clock counting up after reaching zero

4. Registered User
Join Date
Oct 2013
Posts
20
I really appreciate the help, but I have no clue what I'm looking at in regard to your script. Like I said, I'm pretty new to JavaScript. I guess I'll just keep working at it. I have the seconds, minutes, and hours working flawlessly. Just the days, months, and years are giving me trouble. I'll just keep working on it. Thanks!

5. It would take too much typing to explain but in a nutshell, you work out the number of milliseconds in a standard day, this will be 24*60*60*1000

From this you can work out an average for a year.

Keep in mind the accuracy will be out by as much as 6 hour per year because leap years introduce 24 hours variance = 24 / 4 = 6 hours.

I am currently working on a way of ironing out this difference, I suggest you too look at working on a way of improving accuracy.

What I suggest you do is work on a large number like total milliseconds then deduct years, months, weeks, etc. as millisecond values.

When you get the script functioning as you want it, you then can start improving it.

6. Registered User
Join Date
Oct 2013
Posts
20
I continued with my original approach and got it working flawlessly. I posted the code below. I appreciate the assistance anyway.

My next question is, how would I make it so that images are displayed instead of numbers? For instance, an image of a 1 and an image of a 7 would display instead of just the number 17. Is that difficult? Could I implement that into my current script?

7. Registered User
Join Date
Oct 2013
Posts
20
I know it's not how I probably should do it, but it works perfectly...which in my opinion is all that really matters.
Code:
function countretire(){

var today = new Date();
var ayears = today.getFullYear();
var xyears = today.getFullYear();
var amonths = today.getMonth();
var xmonths = today.getMonth();
var xdays = today.getDate();
var ahours = today.getHours();
var xhours = today.getHours();
var aminutes = today.getMinutes();
var xminutes = today.getMinutes();
var aseconds = today.getSeconds();
var xseconds = today.getSeconds();

if(aseconds) aseconds = 59 - aseconds;
if(xseconds == 0) aseconds = aseconds + 59;
if(aseconds <= 9) aseconds = "0" + aseconds;

if(aminutes) aminutes = 59 - aminutes;
if(xminutes == 0) aminutes = aminutes + 59;
if(aminutes <= 9) aminutes = "0" + aminutes;

if(ahours) ahours = 24 - ahours;
if(xhours >= 0) ahours = ahours + 16;
if(ahours >= 24) ahours = ahours - 24;
if(ahours <= 9) ahours = "0" + ahours;

if(xyears != 2016 && xmonths == 1) adays = 28 - adays;
if(xyears == 2016 && xmonths == 1) adays = 29 - adays;

if(amonths) amonths = 11 - amonths;
if(xmonths >= 0) amonths = amonths + 8;
if(amonths >= 12) amonths = amonths - 12;
if(xmonths == 0 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xyears != 2016 && xmonths == 1 && xdays == 28 && xhours >= 17) amonths = amonths - 1;
if(xyears == 2016 && xmonths == 1 && xdays == 29 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 2 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 3 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 4 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 5 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 6 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 7 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 8 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 9 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 10 && xdays == 30 && xhours >= 17) amonths = amonths - 1;
if(xmonths == 11 && xdays == 31 && xhours >= 17) amonths = amonths - 1;
if(amonths < 0) amonths = amonths + 12;
if(amonths <= 9) amonths = "0" + amonths;

if(ayears) ayears = 2017 - ayears;
if(xmonths >= 7) ayears = ayears - 1;
if(xmonths == 7 && xdays <= 30) ayears = ayears + 1;
if(xmonths == 7 && xdays == 31 && xhours <= 16) ayears = ayears + 1;
if(ayears <= 9) ayears = "0" + ayears;

if(today){
dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + ayears + ":" + amonths + ":" + adays + ":" + ahours + ":" + aminutes + ":" + aseconds + "</span></b></font>";
}
if(xyears == 2017 && xmonths == 7 && xdays == 31 && xhours >= 17){
dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it!  You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
}
if(xyears == 2017 && xmonths >= 8){
dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it! You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
}
if(xyears >= 2018){
dispElapsed = "<font face='Arial' size='6'><b><span class='datetime'>" + "You made it!  You're Retired!<br><br>Congratulations!<br><br>No one deserves it more than you!<br><br>I love you!" + "</span></b></font>";
}
var e = document.getElementById("countretire");
if(!e) return;
if("innerHTML" in e) e.innerHTML = dispElapsed;
setTimeout("countretire()", 1000);
}

8. Originally Posted by bman84
I continued with my original approach and got it working flawlessly. I posted the code below. I appreciate the assistance anyway.

My next question is, how would I make it so that images are displayed instead of numbers? For instance, an image of a 1 and an image of a 7 would display instead of just the number 17. Is that difficult? Could I implement that into my current script?
Why images? Why not just use CSS to change the font and size and styling?

9. Registered User
Join Date
Oct 2013
Posts
20
Because there are just some things that CSS can't do. I'm not just making the numbers bold, shadowed, etc. I'm doing very ornate numbers.

Can you help me with that please? I think I'll be set after that. I shouldn't have to bother you again. Haha! Thank you for your input so far!

10. Registered User
Join Date
Oct 2013
Posts
20
I got it now...images and everything! Man...JavaScript is great! Thanks!

11. *Cough*

http://www.w3schools.com/css/css3_fonts.asp

Web designers are not stuck with web safe fonts, they are used as a fall back...

12. Registered User
Join Date
Oct 2013
Posts
20
Originally Posted by \\.\
*Cough*

http://www.w3schools.com/css/css3_fonts.asp

Web designers are not stuck with web safe fonts, they are used as a fall back...
Originally Posted by bman84
Because there are just some things that CSS can't do. I'm not just making the numbers bold, shadowed, etc. I'm doing very ornate numbers.
Again, there are some things that CSS just can't do. Thanks though.

13. You are missing the point that you can use any font you need, as long as the font exists on the target machine your setting this up on. your going to be able to display that font you want.

CSS can do much more than just making type faces bold or dropping a shadow, you only need to do a little search to find that out.

14. Registered User
Join Date
Oct 2013
Posts
20
Originally Posted by \\.\
You are missing the point that you can use any font you need, as long as the font exists on the target machine your setting this up on. your going to be able to display that font you want.

CSS can do much more than just making type faces bold or dropping a shadow, you only need to do a little search to find that out.
I'm sorry, but I believe you are missing my point. I know that CSS can do really great things now, but CSS can't do what I am trying to do. If you saw the ornate letters I created (I'm certainly more of a graphics guy than a coder), then you would agree that I should use images instead of CSS. You're acting as if you are offended by me refusing to use CSS. I know what my images are, and I know that CSS can't even come close to achieving the same look. I appreciate the insight, but this thread can be closed because everything is already resolved. Thank you!

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

"

"

X vBulletin 4.2.2 Debug Information

• Page Generation 0.47343 seconds
• Memory Usage 3,055KB
• Queries Executed 15 (?)
Template Usage (35):
• (3)bbcode_code
• (1)bbcode_html
• (4)bbcode_quote
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (14)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (14)postbit
• (14)postbit_onlinestatus
• (14)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (72):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_postinfo_query
• fetch_postinfo
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete