The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Javascript counter add more

View previous topic View next topic Go down

Solved Javascript counter add more

Post by Mati on Fri 31 Jul 2015 - 12:03

Hello,

I have this code which counts days, hours, minutes and seconds but I also want to add year and month in to it.

Ex:

3 years 5 months 5 days 5 hours 5 mins 5 secs

This how it looks now -> http://idesign.forumotion.net/forum

Code:
<script type="text/javascript">
/**********************************************************************************************
* Days-Hours-Minutes-Seconds Counter script by Praveen Lobo
* (http://PraveenLobo.com/techblog/javascript-counter-count-days-hours-minutes-seconds/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function DaysHMSCounter(initDate, id){
    this.counterDate = new Date(initDate);
    this.container = document.getElementById(id);
    this.update();
}
 
DaysHMSCounter.prototype.calculateUnit=function(secDiff, unitSeconds){
    var tmp = Math.abs((tmp = secDiff/unitSeconds)) < 1? 0 : tmp;
    return Math.abs(tmp < 0 ? Math.ceil(tmp) : Math.floor(tmp));
}
 
DaysHMSCounter.prototype.calculate=function(){
    var secDiff = Math.abs(Math.round(((new Date()) - this.counterDate)/1000));
    this.days = this.calculateUnit(secDiff,86400);
    this.hours = this.calculateUnit((secDiff-(this.days*86400)),3600);
    this.mins = this.calculateUnit((secDiff-(this.days*86400)-(this.hours*3600)),60);
    this.secs = this.calculateUnit((secDiff-(this.days*86400)-(this.hours*3600)-(this.mins*60)),1);
}
 
DaysHMSCounter.prototype.update=function(){
    this.calculate();
    this.container.innerHTML =
        " <strong>" + this.days + "</strong> " + (this.days == 1? "day" : "days") +
        " <strong>" + this.hours + "</strong> " + (this.hours == 1? "hour" : "hours") +
        " <strong>" + this.mins + "</strong> " + (this.mins == 1? "min" : "mins") +
        " <strong>" + this.secs + "</strong> " + (this.secs == 1? "sec" : "secs");
    var self = this;
    setTimeout(function(){self.update();}, (1000));
}
 
window.onload=function(){ new DaysHMSCounter('July 14, 2015 12:00:00', 'counter'); }
 
</script>
<div id="counter">
                 Contents of this DIV will be replaced by the timer             
</div>


Last edited by Mati on Sun 2 Aug 2015 - 12:38; edited 1 time in total

Mati
Active Poster

Posts : 1885
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Javascript counter add more

Post by Mati on Sun 2 Aug 2015 - 8:03

Bump...

Mati
Active Poster

Posts : 1885
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Javascript counter add more

Post by Russel on Sun 2 Aug 2015 - 10:07

Hey @Mati,

I just added codes that will show months & years on your counter. This should work. Try this:  
Code:
<script type="text/javascript">
/**********************************************************************************************
* Days-Hours-Minutes-Seconds Counter script by Praveen Lobo
* (http://PraveenLobo.com/techblog/javascript-counter-count-days-hours-minutes-seconds/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function DaysHMSCounter(initDate, id){
    this.counterDate = new Date(initDate);
    this.container = document.getElementById(id);
    this.update();
}
 
DaysHMSCounter.prototype.calculateUnit=function(secDiff, unitSeconds){
    var tmp = Math.abs((tmp = secDiff/unitSeconds)) < 1? 0 : tmp;
    return Math.abs(tmp < 0 ? Math.ceil(tmp) : Math.floor(tmp));
}
 
DaysHMSCounter.prototype.calculate=function(){
    var secDiff = Math.abs(Math.round(((new Date()) - this.counterDate)/1000));
    this.years = this.calculateUnit(secDiff,31536000);
    this.months = this.calculateUnit(secDiff,2628000);
    this.days = this.calculateUnit(secDiff,86400);
    this.hours = this.calculateUnit((secDiff-(this.days*86400)),3600);
    this.mins = this.calculateUnit((secDiff-(this.days*86400)-(this.hours*3600)),60);
    this.secs = this.calculateUnit((secDiff-(this.days*86400)-(this.hours*3600)-(this.mins*60)),1);
}
 
DaysHMSCounter.prototype.update=function(){
    this.calculate();
    this.container.innerHTML =
         " <strong>" + this.years + "</strong> " + (this.years == 1? "year" : "years") +
         " <strong>" + this.months + "</strong> " + (this.months == 1? "month" : "months") +
        " <strong>" + this.days + "</strong> " + (this.days == 1? "day" : "days") +
        " <strong>" + this.hours + "</strong> " + (this.hours == 1? "hour" : "hours") +
        " <strong>" + this.mins + "</strong> " + (this.mins == 1? "min" : "mins") +
        " <strong>" + this.secs + "</strong> " + (this.secs == 1? "sec" : "secs");
    var self = this;
    setTimeout(function(){self.update();}, (1000));
}
 
window.onload=function(){ new DaysHMSCounter('July 14, 2015 12:00:00', 'counter'); }
 
</script>
<div id="counter">
                          Contents of this DIV will be replaced by the timer                    
</div>

Russel
Active Poster

Male Posts : 1400
Reputation : 235
Language : English, Filipino
Location : Philippines

http://help.forumotion.com/forum

Back to top Go down

Solved Re: Javascript counter add more

Post by Mati on Sun 2 Aug 2015 - 12:38

Hello, Russel

Good to see you again Smile and thanks for the help

Mati
Active Poster

Posts : 1885
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Javascript counter add more

Post by Russel on Sun 2 Aug 2015 - 12:47

@Mati wrote:Hello, Russel

Good to see you again Smile and thanks for the help  

No problem bro. Glad i could help. Very good

Russel
Active Poster

Male Posts : 1400
Reputation : 235
Language : English, Filipino
Location : Philippines

http://help.forumotion.com/forum

Back to top Go down

Solved Re: Javascript counter add more

Post by APE on Mon 3 Aug 2015 - 8:41

Topic solved and archived





APE
Manager
Manager

Male Posts : 8648
Reputation : 762
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum