Press "Enter" to skip to content

Hex Color Clock With Pure JavaScript | clock.js

Hex Color Time, JavaScript library to create a creative digital clock that represents the current time as a hex color value and changes the background color accordingly.

How to make use of it:

1. Create a container to hold the hex color clock.

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

2. Download the library and insert the clock.js into the doc when needed.

<script src="clock.js" defer></script>

3. Or insert the next JavaScript snippets into the present JS file.

setInterval(function() {
  today = new Date();
  hex = "#" + (today.getHours() < 10 ? '0' : '') + today.getHours() + "" + (today.getMinutes() < 10 ? '0' : '') + today.getMinutes() + "" + (today.getSeconds() < 10 ? '0' : '') + today.getSeconds();
  document.querySelector("#clock").innerHTML = hex;
  document.body.style.backgroundColor = hex;
}, 1)

Hexadecimal Color Clock In JavaScript, Hex-Color Clock, hextime Plugin/Github


See Demo And Download

Official Website(JamelHammoud): Click Here

This superior jQuery/javascript plugin is developed by JamelHammoud. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *