Skip to content

Instantly share code, notes, and snippets.

@sfentress
Created December 16, 2014 15:57
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 sfentress/c261e4b1cf50d69e2112 to your computer and use it in GitHub Desktop.
Save sfentress/c261e4b1cf50d69e2112 to your computer and use it in GitHub Desktop.
HSL Clock
<html>
<head>
<style>
@media all and (max-width: 1024px) {
h1 { font-family:"open sans"; font-size:40px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
h2 { font-family:"open sans"; font-size:20px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
}
@media all and (min-width: 1024px) {
h1 { font-family:"open sans"; font-size:120px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
h2 { font-family:"open sans"; font-size:30px; font-weight:300; color:white; transition:all 0.6s; -webkit-transition:all 0.6s;}
}
table { position:absolute; width:100%; height:100%; top:0px; left:0px;}
.fb-like {position:static; width:100px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<body onLoad="dotime()">
<table><td height="100%" width="100%" align="center" valign="middle">
<h1 id="t"></h1><br>
<h2 id="h"></h2>
</td></table>
<script>
function dotime(){
$("body").css({"transition": "all 0.8s", "-webkit-transition": "all 0.8s"});
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
if (hours < 10){hours = "0" + hours};
if (mins < 10){mins = "0" + mins};
if (secs < 10){secs = "0" + secs};
hours.toString();
mins.toString();
secs.toString();
var hsl = "hsl(" + hours + "0, " + mins + "%, " + secs + "%)";
$("#t").html(hours +" : "+ mins +" : "+ secs);
$("#h").html(hsl);
document.body.style.background = hsl;
setTimeout(function(){ dotime();}, 1000);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment