Been wanting to make one of these hue clocks for a while. 3-Part hue clock representing hours, minutes, seconds && it tells the actual time. Vanilla JS. Resizes to viewport.
A Pen by Tiffany Rayside on CodePen.
Created
August 16, 2015 07:10
-
-
Save tmrDevelops/8bfebcc08335c9aa4d61 to your computer and use it in GitHub Desktop.
3Pt. Hue Clock
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="hour"></div> | |
| <div id="min"></div> | |
| <div id="sec"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var $ = function(id) { | |
| return document.getElementById(id); | |
| }; | |
| setInterval(function() { | |
| var d = new Date, | |
| s = d.getSeconds() + d.getMilliseconds() / 1000, | |
| m = d.getMinutes() + s / 60, | |
| h = d.getHours() + m / 60; | |
| var sh = d.getHours(); | |
| if (sh == 00) { | |
| sh = 12; | |
| }else if (sh >= 13) { | |
| sh -= 12; | |
| } | |
| $('hour').style.background = col(h / 24); | |
| $('hour').innerHTML = sh; | |
| $('min').style.background = col(m / 60); | |
| $('min').innerHTML = num0(d.getMinutes()); | |
| $('sec').style.background = col(s / 60); | |
| $('sec').innerHTML = num0(d.getSeconds()); | |
| }, 30); | |
| var num0 = function(str){ | |
| var tStr = str.toString(); | |
| if( tStr.length < 2 ){ | |
| str = 0 + tStr; | |
| } | |
| return str; | |
| } | |
| var col = function(hue) { | |
| var upd = 1 - .15 * (1 - Math.sin(Math.PI * (hue + 30) / 180)), | |
| rgb = "#"; | |
| for (var i = 0; i < 3; i++) { | |
| rgb += hex(upd * conv(360 * hue - i * 120)); | |
| } | |
| return rgb; | |
| } | |
| var conv = function(hue) { | |
| while (hue < 0) { | |
| hue += 360; | |
| } | |
| return (hue < 60) ? 1 : | |
| (hue < 120) ? (2 - hue / 60) : | |
| (hue < 240) ? 0 : | |
| (hue < 300) ? (hue / 60 - 4) : 1; | |
| } | |
| var hex = function(i) { | |
| if (i < 0) i = 0; | |
| else if (i > 1) i = 1; | |
| i = Math.round(255 * i); | |
| return ("0" + i.toString(16)).substr(-2); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Asset); | |
| html, | |
| body { | |
| margin: 0; | |
| height: 100%; | |
| background: hsla(0, 0%, 13%, 1); | |
| color: transparent; | |
| text-align: center; | |
| font-family: 'Asset', cursive; | |
| text-shadow: 0 1px 1px hsla(0, 0%, 13%, 0.35); | |
| } | |
| body, | |
| div { | |
| box-sizing: border-box; | |
| border: solid 5px hsla(0, 0%, 13%, 1); | |
| } | |
| div { | |
| float: left; | |
| width: 61.83%; | |
| height: 100%; | |
| } | |
| #hour { | |
| height: 100%; | |
| font-size: 10em; | |
| padding-top: 1.9em; | |
| } | |
| #min { | |
| width: 38.17%; | |
| height: calc(100% / 2); | |
| font-size: 6em; | |
| padding-top: 1.5em | |
| } | |
| #sec { | |
| width: 38.17%; | |
| height: calc(100% / 2); | |
| font-size: 4.5em; | |
| padding-top: 2.5em | |
| } | |
| @media all and (max-width: 801px) { | |
| div { | |
| transition: font-size .5s ease; | |
| } | |
| #hour { | |
| font-size: 8em; | |
| padding-top: 2.6em; | |
| } | |
| #min { | |
| font-size: 4em; | |
| padding-top: 2.8em; | |
| } | |
| #sec { | |
| font-size: 2.5em; | |
| padding-top: 4.8em; | |
| } | |
| } | |
| @media all and (max-width: 600px) { | |
| div#hour, div#min, div#sec { | |
| width: 100%; | |
| height: calc(100% / 3); | |
| text-align: center; | |
| transition: all .5s ease; | |
| } | |
| #hour { | |
| padding-top: .5em; | |
| } | |
| #min { | |
| padding-top: 1.4em; | |
| } | |
| #sec { | |
| padding-top: 2.8em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment