rootKID Posted March 28, 2014 Share Posted March 28, 2014 Hello W3S! One of my friends going in an it university have been trying to code some stuff for he's website and came up with this for a countdown timer made i JS: (IMAGE ATTACHED) My question now, how to add years? I know how... i think... i just need to calculate correct hehe .. this is the main JS function code: function countdown(secondsRemaining){ var days = Math.floor(secondsRemaining / 86400), hours = Math.floor((secondsRemaining - (days * 86400)) / 3600), minutes = Math.floor((secondsRemaining - (days * 86400) - (hours * 3600)) / 60), seconds = secondsRemaining - (days * 86400) - (hours * 3600) - (minutes * 60); if(secondsRemaining > 0) { if(days < 10) { days = '0' + days; } if(hours < 10) { hours = '0' + hours; } if(minutes < 10) { minutes = '0' + minutes; } if(seconds < 10) { seconds = '0' + seconds; } $('.days > .number').html(days); $('.hours > .number').html(hours); $('.minutes > .number').html(minutes); $('.seconds > .number').html(seconds); secondsRemaining--; } else { if(secondsRemaining == 0) { window.location.reload(); } } window.setTimeout(function() { countdown(secondsRemaining); }, 1000);}function updateProgress(procent){ if(typeof procent !== "number") { procent = 0; } if(procent <= 7) { $('.progressBarFill').css({ width: '7%' }).find('.progressBarFillMiddle').html(procent + '%'); } else if(procent >= 100) { $('.progressBarFill').css({ width: '100%' }).find('.progressBarFillMiddle').html('100%'); } else { $('.progressBarFill').css({ width: procent + '%' }).find('.progressBarFillMiddle').html(procent + '%'); }}function objectConverter(array){ var object = {}; for(var i=0; i<array.length; i++) { object[array[i]] = ''; } return object;}function setHeaderColor(color){ color = color.toLowerCase(); if(typeof color === "undefined") { color = 'yellow'; } if(color in objectConverter(['green', 'blue', 'yellow', 'purple', 'red', 'gray'])) { $('.header').attr('class', 'header').addClass(color); }}function setProgressFillColor(color){ color = color.toLowerCase(); if(typeof color === "undefined") { color = 'green'; } if(color in objectConverter(['green', 'blue', 'yellow', 'purple', 'red', 'gray'])) { $('.progressBarFill').attr('class', 'progressBarFill clear').addClass(color); }} and this is main HTML file: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Construction Page</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="resources/js/verticalcenter.js"></script> <script type="text/javascript" src="resources/js/functions.js"></script> <script type="text/javascript" src="resources/js/main.js"></script> <link rel="stylesheet" href="resources/css/main.css" /> </head> <body> <!-- start: container --> <div class="container"> <div class="logo"></div> <div class="header yellow"></div> <!-- start: content --> <div class="content"> <h1>This website is currently undergoing construction</h1> <div class="space20"></div> <h3>We expect an official launch in</h3> <div class="space11"></div> <!-- start: countdownTimerWrap --> <div class="countdownTimerWrap clear"> <!-- start: countdownTimer --> <div class="countdownTimer"> <div class="years"> <div class="number">00</div> <div class="text">Days</div> </div> <div class="days"> <div class="number">00</div> <div class="text">Days</div> </div> <div class="splitter">:</div> <div class="hours"> <div class="number">00</div> <div class="text">Hours</div> </div> <div class="splitter">:</div> <div class="minutes"> <div class="number">00</div> <div class="text">Minutes</div> </div> <div class="splitter">:</div> <div class="seconds"> <div class="number">00</div> <div class="text">Seconds</div> </div> </div> <!-- end: countdownTimer --> </div> <!-- end: countdownTimerWrap --> <div style="clear:both;"></div> <div class="space28"></div> <!-- start: progressBar --> <div class="progressBar"> <!-- start: progressBarFill --> <div class="progressBarFill green clear"> <div class="progressBarFillLeft"></div> <div class="progressBarFillRight"></div> <div class="progressBarFillMiddle">50%</div> </div> <!-- end: progressBarFill --> </div> <!-- end: progressBar --> <div class="space14"></div> <!-- start: progressDescription --> <div class="progressDescription"> <div class="progressDescriptionHeader"></div> <div class="progressDescriptionMiddle"> <h1>We're now about 50% done</h1> <p>We have just finished transferring the user database from the old site</p> </div> <div class="progressDescriptionFooter"></div> <a href=""</a></div> <!-- end: progressDescription --> <div class="space24"></div> </div> <!-- end: content --> <div class="footer"></div> <!-- start: bottomBar --> <div class="bottomBar"> <!-- start: followUs --> <div class="followUs clear"> <div class="boxIndent icon"> <div class="boxIndentLeft"></div> <div class="boxIndentRight"></div> <div class="boxIndentMiddle"> <div class="boxIndentContent"> <a href="http://facebook.com/"><img src="resources/img/follow_us_icons/facebook.png" alt="" /></a> </div> </div> </div> <div class="boxIndent icon"> <div class="boxIndentLeft"></div> <div class="boxIndentRight"></div> <div class="boxIndentMiddle"> <div class="boxIndentContent"> <a href="http://twitter.com/"><img src="resources/img/follow_us_icons/twitter.png" alt="" /></a> </div> </div> </div> <div class="boxIndent icon"> <div class="boxIndentLeft"></div> <div class="boxIndentRight"></div> <div class="boxIndentMiddle"> <div class="boxIndentContent"> <a href="http://linkedin.com/"><img src="resources/img/follow_us_icons/linkedin.png" alt="" /></a> </div> </div> </div> </div> <!-- end: followUs --> <!-- start: notifyMe --> <div class="notifyMe"> <div class="boxIndent notify"> <div class="boxIndentLeft"></div> <div class="boxIndentRight"></div> <div class="boxIndentMiddle"> <form method="post" action=""> <div class="notifyMeInput"> <div class="notifyMeInputLeft"></div> <div class="notifyMeInputRight"></div> <div class="notifyMeInputMiddle"> <input type="text" value="Your email address" onfocus="if(this.value == 'Your email address') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Your email address'; }" /> </div> </div> <div class="notifyMeSubmit"> <input type="image" src="resources/img/notify_button_unactive.png" /> </div> </form> </div> </div> </div> <!-- end: notifyMe --> </div> <!-- end: bottomBar --> </div> <!-- end: container --> </body></html> As you see i have added "years" right above "days" in the countdown section... now, in the JS file, how do i calculate so it will show the "years"? Any suggestions? Link to comment Share on other sites More sharing options...
Ingolme Posted March 28, 2014 Share Posted March 28, 2014 Nothing to do but a long series of subtractions. Since years don't have a fixed number of days a division won't cut it. Though you can assume years are 365 days and have an error margin of one day for every four years. On other words, divide by 365 times the length of a day: secondsRemaining / 31536000 Link to comment Share on other sites More sharing options...
davej Posted March 29, 2014 Share Posted March 29, 2014 Wouldn't you want to add weeks, months, and then years? To be perfectly accurate you would have to use the Date() functions. Link to comment Share on other sites More sharing options...
rootKID Posted March 29, 2014 Author Share Posted March 29, 2014 (edited) hmm... perhaps... this is just the way he was setting it up hehe ... @Ingolme - will test later, thanks for the support! Writing if it helped @davej - will edit it later, but you are right... the setup is bad .. EDIT: @Ingolme - Thanks! Working like a charm x)... Edited March 29, 2014 by rootKID Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now