Binary Clock Display

For the true tech enthusiast. This script takes the current time and converts it into binary code, updating every second.

000000 : 000000 : 000000

HH : MM : SS

Copy the Script

<div id="clock"></div>

<script>
function dec2bin(dec){
    return (dec >>> 0).toString(2).padStart(6, '0');
}

function updateBinary() {
    var d = new Date();
    var h = dec2bin(d.getHours());
    var m = dec2bin(d.getMinutes());
    var s = dec2bin(d.getSeconds());
    document.getElementById("clock").innerText = h + " : " + m + " : " + s;
}

setInterval(updateBinary, 1000);
</script>

Frequently Asked Questions

Each row represents a time unit (Hour, Minute, Second). You add up the values of the '1's (1, 2, 4, 8, 16, 32) to get the decimal number.

Yes, it pulls the time directly from the system clock and converts it in real-time.

Yes. The script outputs strings, but you can easily modify it to output HTML dots or squares and style them with CSS for a classic LED look.