time

by jayhilwig

HTML

<div class="h1">
    <input id="timeDisplay" />
</div>

CSS

#timeDisplay {
    font-size:25px;
    width:50%;
}
input:focus {
    outline: 0;
}
input {
    background-color:transparent;
    border: 0px solid;
}

JavaScript

jQuery(document).ready(function () {
    var timeDisplay = jQuery('#timeDisplay');

    function pad2(number) {
        return (number < 10 ? '0' : '') + number
    }

    function updateTime() {
        var d = new Date();
        var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

        //Day-Month is euro format
        var curr_date = d.getDate();
        var curr_month = d.getMonth();
        
        //Hours:Minutes:seconds
        var curr_hour = d.getHours();
        //Formatting for 12 hour format
        curr_hour = (curr_hour > 12) ? curr_hour - 12 : curr_hour;
        curr_hour = (curr_hour == '00') ? 12 : curr_hour;
        var curr_min = d.getMinutes();
        var curr_sec = d.getSeconds();

        //Add 0's to minutes and seconds if needed but not hours
        now = curr_date + "-" + m_names[curr_month] + "  |  " + curr_hour + ":" + pad2(curr_min) + ":" + pad2(curr_sec);
        timeDisplay.val(now.toString());
    }
    updateTime();
    setInterval(updateTime, 1000); // update every second
});