2

I looked at a stats page here: http://movies.io/i/stats

And I noticed a cool nifty thing down there there was a counter that counted how long it was since the site was born and today. It displays as this: It was born 1 month, 8 days, 2 hours, and 36 minutes ago. I tried finding the code with no luck at the page.

The problem is that when searching for how to's, I only found counting in days. And one more problem is to refresh it... without refreshing the page. It seems like some serious coding.

How do I make a counter like on the shown page? I do not want to use jQuery.

I am sorry if this sounds like a question that says: Hey... just do my job while I relax. But the problem is that I am new and I could not find the solution to the thing I wanted to make.

user1431627
  • 815
  • 3
  • 13
  • 30
  • In the case of movies.io, they are using an Ajax call to update the counter. – Jon Jun 27 '12 at 00:31
  • possible duplicate of [How to calculate date difference in javascript](http://stackoverflow.com/questions/7763327/how-to-calculate-date-difference-in-javascript) – Sani Huttunen Jun 27 '12 at 00:45
  • What of the answers do you recomend me? Kinda hard caused by not a lot of up votes and not accepted answer. – user1431627 Jun 27 '12 at 07:11

2 Answers2

3

In the name of boredom... this page should update a timespan in javascript without jquery.

<!doctype html>
<html>
<body onload="init()">
    <script type="text/javascript">
        function init() {
            updateTimespan();
            setInterval(updateTimespan, 3000);
        }

        function updateTimespan() {
            var birth = new Date(1987, 3, 20); // april 20th
            var now = new Date();
            var timespan = getTimespan(birth, now);

            var content = '' + timespan.years + ' years, ' +
                timespan.months + ' months, ' +
                timespan.days + ' days, ' +
                timespan.hours + ' hours, ' +
                timespan.minutes + ' minutes, ' +
                timespan.seconds + ' seconds.';

            var p = document.getElementById('pTimespan');
            p.innerHTML = content;
        }

    function getTimespan(start, end) {
        var seconds = end.getSeconds() - start.getSeconds();
        var minutes = end.getMinutes() - start.getMinutes();
        var hours = end.getHours() - start.getHours();
        var days = end.getDate() - start.getDate();
        var months = end.getMonth() - start.getMonth();
        var years = end.getFullYear() - start.getFullYear();

        if (seconds < 0) {
            minutes -= 1;
            seconds += 60;
        }

        if (minutes < 0) {
            hours -= 1;
            minutes += 60;
        }

        if (hours < 0) {
            days -= 1;
            hours += 24;
        }

        if (days < 0) {
            months -= 1;
            var lastMonthNumber = end.getMonth() - 1;
            if (lastMonthNumber < 0) { lastMonthNumber += 12; } // will never be Feb.
            var daysInLastMonth = new Date(end.getFullYear(), lastMonthNumber, 0).getDate();
            days += daysInLastMonth;
        }

        if (months < 0) {
            years -= 1;
            months += 12;
        }

        return {
            years: years,
            months: months,
            days: days,
            hours: hours,
            minutes: minutes,
            seconds: seconds
        };
    }
    </script>
    <p>
        Time since my birth</p>
    <p id="pTimespan">
        Will be updated</p>
</body>
</html>
Jon
  • 969
  • 4
  • 9
0

One solution is get the epoch time your site was created (or an approximation). Then subtract the current time from that. Then use that number of milliseconds to convert to years, months, days, etc. This could be done in javascript or on the server with PHP.

qw3n
  • 6,236
  • 6
  • 33
  • 62