Skip to content

Instantly share code, notes, and snippets.

@eaglefsd

eaglefsd/script.js

Created February 8, 2016 19:40
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 eaglefsd/e3692919d97ebe479548 to your computer and use it in GitHub Desktop.
Save eaglefsd/e3692919d97ebe479548 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
script.js
function setClock() {
var t = new Date();
// I know its ugly... but make it better and this efficient ;)
if (t.getHours() > 9) {
$('.clock .digit:nth-child(1) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getHours() + "").split("")[0]);
$('.clock .digit:nth-child(2) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getHours() + "").split('')[1])
} else {
$('.clock .digit:nth-child(1) .pixel').removeClass().addClass('pixel').addClass('_0');
$('.clock .digit:nth-child(2) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getHours() + "").split('')[0])
}
if (t.getMinutes() > 9) {
$('.clock .digit:nth-child(4) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getMinutes() + "").split("")[0]);
$('.clock .digit:nth-child(5) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getMinutes() + "").split('')[1])
} else {
$('.clock .digit:nth-child(4) .pixel').removeClass().addClass('pixel').addClass('_0');
$('.clock .digit:nth-child(5) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getMinutes() + "").split('')[0])
}
if (t.getSeconds() > 9) {
$('.clock .digit:nth-child(7) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getSeconds() + "").split("")[0]);
$('.clock .digit:nth-child(8) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getSeconds() + "").split('')[1])
} else {
$('.clock .digit:nth-child(7) .pixel').removeClass().addClass('pixel').addClass('_0');
$('.clock .digit:nth-child(8) .pixel').removeClass().addClass('pixel').addClass('_' + (t.getSeconds() + "").split('')[0])
}
}
Raw
style.css
.clock { background-color:#222; height:40px; width:155px; padding-top:5px; padding-left:0px; padding-right:5px; border-radius:3px; border:2px solid #444; margin-top:10px; position: absolute; right: 55px; z-index: 998; }
.clock .digit { float:left; width:20px; height:25px; }
.clock .spacer { float:left; height:25px; padding-top:5px; padding-left:5px; }
.clock .spacer .pixel { width:5px; height:5px; background-color:#82D14D; box-shadow:0px 10px #82D14D; }
.clock .digit .pixel { width:5px; height:5px; background-color:#444;
}
.clock .digit ._1 {
box-shadow:5px 0px #444, 10px 0px #82D14D,
0px 5px #444, 10px 5px #82D14D,
0px 10px #444, 5px 10px #444, 10px 10px #82D14D,
0px 15px #444, 10px 15px #82D14D,
0px 20px #444, 5px 20px #444, 10px 20px #82D14D; }
.clock .digit ._2 {
background-color:#82D14D;
box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
0px 5px #444, 10px 5px #82D14D,
0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
0px 15px #82D14D, 10px 15px #444,
0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._3 {
background-color:#82D14D;
box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
0px 5px #444, 10px 5px #82D14D,
0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
0px 15px #444, 10px 15px #82D14D,
0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._4 {
background-color:#82D14D;
box-shadow:5px 0px #444, 10px 0px #82D14D,
0px 5px #82D14D, 10px 5px #82D14D,
0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
0px 15px #444, 10px 15px #82D14D,
0px 20px #444, 5px 20px #444, 10px 20px #82D14D; }
.clock .digit ._5 {
background-color:#82D14D;
box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
0px 5px #82D14D, 10px 5px #444,
0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
0px 15px #444, 10px 15px #82D14D,
0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._6 {
background-color:#82D14D;
box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
0px 5px #82D14D, 10px 5px #444,
0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
0px 15px #82D14D, 10px 15px #82D14D,
0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._7 {
background-color:#82D14D;
box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
0px 5px #444, 10px 5px #82D14D,
0px 10px #444, 5px 10px #444, 10px 10px #82D14D,
0px 15px #444, 10px 15px #82D14D,
0px 20px #444, 5px 20px #444, 10px 20px #82D14D; }
.clock .digit ._8 {
background-color:#82D14D;
box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
0px 5px #82D14D, 10px 5px #82D14D,
0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
0px 15px #82D14D, 10px 15px #82D14D,
0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._9 {
background-color:#82D14D;
box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
0px 5px #82D14D, 10px 5px #82D14D,
0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
0px 15px #444, 10px 15px #82D14D,
0px 20px #444, 5px 20px #444, 10px 20px #82D14D; }
.clock .digit ._0 {
background-color:#82D14D;
box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
0px 5px #82D14D, 10px 5px #82D14D,
0px 10px #82D14D, 5px 10px #444, 10px 10px #82D14D,
0px 15px #82D14D, 10px 15px #82D14D,
0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment