CODEWITHSUNDEEP
javascriptclock
Minter DeWitt
Minter DeWitt

Reputation: 1

JavaScript Clock Counting Upwards to Include Months and Years

I have very little experience with JavaScript, so there will have to be a little bit of hand-holding for this matter. I need a simple, no-fuss JavaScript clock that counts upwards displaying the years, months, and days in that order with the start date being September 26th, 2013. Obviously, the years will not kick in until September 26th of this year. And I need to be able to style the various elements with cascading style sheets. Any and all help will be greatly appreciated. And yes, I have searched the interwebs. I found clocks that began counting when the webpage was loaded and it only went up to minutes. One went up to hours, but none of them seem to go as far as months or years. Again, any help will be muchly appreciated.

Upvotes: 0

Views: 524

Answers (4)

MasqueradeCircus
MasqueradeCircus

Reputation: 854

If you need more control, a complicated but more explicit way to do it is like:

http://jsfiddle.net/masqueradecircus/qPPU5/

var date2 = new Date("May 14, 2010 23:59:59"), date;
function aC(a){return a<10?('0'+a):a;}

setInterval(function(){
    date = new Date(), z = [date.getFullYear()-date2.getFullYear(),date.getDate()-date2.getDate(), date.getHours()-date2.getHours(), date.getMinutes()-date2.getMinutes(), date.getSeconds()-date2.getSeconds() ];
        if(z[4] < 0) z[3]-=1,z[4]=60+z[4];
        if(z[3] < 0) z[2]-=1,z[3]=60+z[3];
        if(z[2] < 0) z[1]-=1,z[2]=24+z[2];
        if(z[1] < 0) z[0]-=1,z[1]=30+z[1];
        $('.daysleft').html('It has been  <b>'+ aC(z[0]) +' years, '+ aC(z[1]) +' days, '+ aC(z[2]) +' hours '+ aC(z[3]) +' minutes and '+ aC(z[4]) +' secconds</b>.');
},1001);

Result: 

It has been 04 years, 10 days, 02 hours 38 minutes and 31 secconds

Upvotes: 0

MasqueradeCircus
MasqueradeCircus

Reputation: 854

You can use my jQuery plugin. https://github.com/Masquerade-Circus/setDate.js

This is as easy as write: 

var dateContainer = $('#your/date/container/id');
setInterval(function(){
    dateContainer.setDate();
},1001);

And you can format the date as you want, even translate it. Example: 

var dateContainer = $('#your/date/container/id');
setInterval(function(){
    dateContainer.setDate({format: "Today is: +l +j of +F of +Y. And the time is: +G:+ii +a."});
},1001);

You just need to pass the milliseconds between the two dates.

Upvotes: 0

kennebec
kennebec

Reputation: 104760

You don't seem to want a clock so much as a human view of time- in your case, the 26th of each month ticks over your counter.

   <!doctype html>
    <html lang="en">
    <head>
    <meta charset= "utf-8">
    <title>count up</title>
    <script>
    function monthLengths(y){
        var y=y || new Date().getFullYear();
        var feb= y%4== 0 && (y%100 || y%400== 0)? 29: 28;
        return [31, feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    }

    function ymdBetween(fromDay, toDay){
        var to, from= new Date(fromDay);
        if(!toDay && toDay!== 0) to= new Date();
        else to= new Date(toDay);

        var A= [], years= 0, months= 0, days= 0, 
        fromYear= from.getFullYear(), 
        fromMonth= from.getMonth(), 
        fromDate= from.getDate(), 
        toYear= to.getFullYear(), 
        toMonth= to.getMonth(), 
        toDate= to.getDate(),
        monthdays= monthLengths(toYear),
        years= toYear-fromYear;

        if(years){
            if(fromMonth>toMonth || (fromMonth== toMonth && fromDate>toDate)) years-= 1;
            if(years) A[0]= (years +' year');
        }
        if(fromMonth>toMonth || (fromMonth=== toMonth && fromDate>toDate)){
            months= 12-fromMonth+toMonth;
        }
        else{
            months= toMonth-fromMonth;
        }
        if(fromDate>toDate)--months;
        if(months) A[A.length]= (months +' month');

        if(fromDate>toDate){
            var lastmonthlength= monthdays[toMonth-1];
            if(lastmonthlength< fromDate)fromDate=lastmonthlength;
            days= lastmonthlength-fromDate+toDate;
        }
        else days= toDate-fromDate;
        if(days) A[A.length]= (days+' day');

        return A.map(function(itm){
            return parseInt(itm, 10)>1? itm+'s': itm;
        }).join(', ');
    }
    function printSince(){
        var str= document.getElementById('whenTxt').value,
        s=ymdBetween(str);
        alert(s)
        document.getElementById('sinceText').innerHTML='<h2>'+s+'</h2>';
    }
    window.onload=function(){
        document.getElementById('sinceBtn').onclick=printSince;
    }
    </script>

    </head>
    <body>
    <h1>Since When: <input id="whenTxt" type="text" value="September 26, 2013">
    <button id="sinceBtn" type="text">Display</button></h1>
    <div id="sinceText" style="margin-left:2em">&nbsp;</div>
    </body>
    </html>

Upvotes: 2

Ali Gajani
Ali Gajani

Reputation: 15091

http://jsfiddle.net/9fQcL/3

I wrote this for my project a while ago. I hope it helps. This gives you a start off. Note that presently, my code works in days, so you will have to modify it to show years, months and day all together, but that's for you to figure out. ;)

var d = new Date();
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2013,08,28);

var Y =  d.getFullYear();
var M = d.getMonth();
var D = d.getDate();

var secondDate = new Date(Y,M,D);

var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
document.getElementById("dd").innerHTML = diffDays+" days";
document.getElementById("since").innerHTML = "Since "+ firstDate;

Meanwhile, this will actually do what you want, counts Days, Months and Years in between Dates().

http://daycalc.appspot.com/09/28/2013

Upvotes: 1

Related Questions