Skip to content

Instantly share code, notes, and snippets.

@1995eaton

1995eaton/hexclock.html

Created June 21, 2014 06:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 1995eaton/a5f5d35d449437c38ee4 to your computer and use it in GitHub Desktop.
Save 1995eaton/a5f5d35d449437c38ee4 to your computer and use it in GitHub Desktop.
Download ZIP
Hex Clock
Raw
hexclock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hex Time</title>
<style>
body {
transition: background-color 0.2s ease-out;
-webkit-transition: background-color 0.2s ease-out;
-moz-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
text-align: center;
width: 100%; height: 100%;
left: 0; top: 0;
position: absolute;
margin: 0;
}
#hex {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
font-family: Helvetica Neue, Helvetica, Neue, sans-serif, Arial;
transition: color 0.2s ease-in;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
font-size: 54pt;
font-weight: 100;
}
</style>
</head>
<body>
<div id="hex"></div>
</body>
</html>
<script>
var hexElement = document.getElementById('hex');
function updateHex() {
var date = new Date(),
hexString = [date.getHours(), date.getMinutes(), date.getSeconds()].map(function(e) {
return ('0' + e.toString()).slice(-2);
});
document.body.style.backgroundColor = hexElement.textContent = '#' + hexString.join('');
hexElement.style.color = '#' + (0xffffff - +('0x' + hexString.reverse().join(''))).toString(16);
window.setTimeout(updateHex, 1e3);
};
updateHex();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment