Hexadecimal Color Clock In JavaScript – clock.js

Category: Image | September 24, 2020
Author:JamelHammoud
Views Total:30 views
Official Page:Go to website
Last Update:September 24, 2020
License:MIT

Preview:

Hexadecimal Color Clock In JavaScript – clock.js

Description:

A Vanilla JavaScript library to create a creative digital clock representing the current time as a hexadecimal color value and changing the background color accordingly.

How to use 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 document when needed.

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

3. Or insert the following JavaScript snippets into the existing 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)

You Might Be Interested In:


Leave a Reply