[HOW TO] Add A Countup Timer for Your Website

If you want to tell people how long your website live, you will need the following code:

*PS: I just do in my way. I like put total days not years and days combination. You can add diffYears to your own countup text.

<script language=javascript>
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        // Get current time
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        // Your blog go live date
        var t1 = Date.UTC(2018, 11, 03, 00, 00, 00); // Start time in yyyy mm dd hh mm ss format
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffDaysShow = Math.floor(diff / days); //show days only
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        // Customize your own text. You can use diffYears, diffDays etc.
        document.getElementById("sitetime").innerHTML = "Palace has been open for " +diffDaysShow + " day(s) " + diffHours + " hour(s) " + diffMinutes + " minute(s) " + diffSeconds + " second(s).";
    }
    siteTime();
</script>

After that, you need to put the following code to the place you want (normally is in footer).

<span id="sitetime"></span>

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.