Date Stuff

by Matthew Day

HTML

<body onload="startTime()">
    
    <div id="clock-wrap">
        <div id="the-clock">
            <div id="the-hour" class="time-part">...</div>
            <div id="the-minute" class="time-part">...</div>
            <div id="the-second" class="time-part">...</div>
            <div id="the-millisecond" class="time-part">...</div>
        </div>

        <div id="weekday-wrap">
            <div id="the-weekday">...</div>
        </div>
        
        <div id="date-wrap">
            <div id="the-day" class="date-part">...</div>
            <div id="the-month" class="date-part">...</div>
            <div id="the-year" class="date-part">...</div>
        </div>
    </div>
    
</body>

CSS

body {
    font-size: 1.2em;
    color: rgba(255,255,255,.7);
}

#clock-wrap {
    background-image: url('https://s3-us-west-2.amazonaws.com/md-ratios/01_paris_original.jpg');
    background-position: center;
    height: 140px;
    padding: 20px; 
}

#the-clock {
    display: inline-block;
    width: 100%;
    margin-bottom: -4px; /* Reset for inline-block */
}

.time-part {
    width: 24px;
    float: left;
}

.date-part {
    width: inherit;
    float: left;
    padding-right: 6px;
}

JavaScript

function startTime() {

    var weekdays = new Array(7);
        weekdays[0] = "Sunday";
        weekdays[1] = "Monday";
        weekdays[2] = "Tuesday";
        weekdays[3] = "Wednesday";
        weekdays[4] = "Thursday";
        weekdays[5] = "Friday";
        weekdays[6] = "Saturday";
    
        var months = new Array(12);
        months[1] = "January";
        months[2] = "February";
        months[3] = "March";
        months[4] = "April";
        months[5] = "May";
        months[6] = "June";
        months[7] = "July";
        months[8] = "August";
        months[9] = "September";
        months[10] = "October";
        months[11] = "November";
        months[12] = "December";
    
    var today=new Date();
    
    var weekday=today.getDay();
    var day=today.getDate();
    var month=today.getMonth()+1;
    var year=today.getFullYear();
    var hour=today.getHours();
    var minute=today.getMinutes();
    var second=today.getSeconds();
    var millisecond=today.getMilliseconds();
    
    minute = checkTime(minute);
    second = checkTime(second);
    
    setTimeout(function(){startTime()},1);

    document.getElementById('the-weekday').innerHTML = weekdays[weekday];
    document.getElementById('the-day').innerHTML = day;
    document.getElementById('the-month').innerHTML = months[month];
    document.getElementById('the-year').innerHTML = year;
    document.getElementById('the-hour').innerHTML = hour;
    document.getElementById('the-minute').innerHTML = minute;
    document.getElementById('the-second').innerHTML = second;
    document.getElementById('the-millisecond').innerHTML = millisecond;
    
}

function checkTime(i) {
    if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}