Skip to content

Instantly share code, notes, and snippets.

@knowlet

knowlet/time.html

Last active August 29, 2015 14:13
Show Gist options
  • Save knowlet/a5b3c75f079a8de23d60 to your computer and use it in GitHub Desktop.
Save knowlet/a5b3c75f079a8de23d60 to your computer and use it in GitHub Desktop.
Download ZIP
What colour is counting down?
Raw
time.html
<!DOCTYPE html><html><head><title>What colour is counting down?</title><meta charset="UTF-8" ><link href='http://fonts.googleapis.com/css?family=Open+Sans:800,400,300' rel='stylesheet' type='text/css'>
<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;}
body { transition: all 0.8s; -webkit-transition: all 0.8s; background-color: black;}
</style>
</head>
<body>
<table><td height="100%" width="100%" align="center" valign="middle">
<img src="http://hackgen.sitcon.org/images/logo.png" style="width:720px; marign: 12px" />
<h1 id="t"></h1><br>
</td></table>
</body>
<script type="text/javascript">
// hackgen 2015 - http://hackgen.sitcon.org/
var n = new Date("2015/1/18 16:30");
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer = setInterval(function() {
var a = n - new Date;
if (0 >= a) {clearInterval(timer), t.innerText = "TIMEUP!"; return;}
var b = Math.floor(a / _hour), c = Math.floor(a % _hour / _minute), d = Math.floor(a % _minute / _second);
10 > b && (b = "0" + b);
10 > c && (c = "0" + c);
10 > d && (d = "0" + d);
var e = "#" + b + c + d;
t.innerText = b + " : " + c + " : " + d;
document.body.style.background = e;
}, 1E3);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment