Skip to content

Instantly share code, notes, and snippets.

@cryptojuice

cryptojuice/A-Pen-by-Nick-Robinson.markdown

Created August 27, 2013 04:10
Show Gist options
  • Save cryptojuice/6349559 to your computer and use it in GitHub Desktop.
Save cryptojuice/6349559 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Nick Robinson.
Raw
index.html
<html>
<body>
<div id="clock">
<div class = "digits"></div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</body>
</html>
Raw
script.js
$(document).ready(function () {
var num_to_word = ['zero', 'one', 'two',
'three', 'four', 'five',
'six', 'seven', 'eight',
'nine'];
var i = 0;
setInterval(function() {
$('.digits').empty();
$('.digits').append('<div class="' + num_to_word[i] + '"></div>');
for (var j = 1; j <= 13; j++) {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
$('.' + num_to_word[i]).append('<span class="d' + j + '"></span>');
$('.digits div span').css("background-color", "#" + randomColor);
}
if (i < 9) {
i++;
} else {
i = 0;
}
}, 1000);
});
Raw
style.css
body {
background-color: #000000;
}
#clock {
position: absolute;
height: 150px;
width: 350px;
}
#clock .digits div span {
opacity: 0;
position: absolute;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius: 20%;
}
#clock .digits .d1 {
top: 10px;
left: 20px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d2 {
top: 10px;
left: 40px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d3 {
top: 10px;
left: 60px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d4 {
top: 30px;
left: 20px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d5 {
top: 30px;
left: 60px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d6 {
top: 50px;
left: 20px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d7 {
top: 50px;
left: 40px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d8 {
top: 50px;
left: 60px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d9 {
top: 70px;
left: 20px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d10 {
top: 70px;
left: 60px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d11 {
top: 90px;
left: 20px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d12 {
top: 90px;
left: 40px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
#clock .digits .d13 {
top: 90px;
left: 60px;
height: 15px;
width: 15px;
background-color: #A2BDFA;
}
/* zero */
#clock .digits div.zero .d1,
#clock .digits div.zero .d2,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d8,
#clock .digits div.zero .d9,
#clock .digits div.zero .d10,
#clock .digits div.zero .d11,
#clock .digits div.zero .d12,
#clock .digits div.zero .d13 {
opacity: 1;
}
/* one */
#clock .digits div.one .d3,
#clock .digits div.one .d5,
#clock .digits div.one .d8,
#clock .digits div.one .d10,
#clock .digits div.one .d13 {
opacity: 1;
}
/* two */
#clock .digits div.two .d1,
#clock .digits div.two .d2,
#clock .digits div.two .d3,
#clock .digits div.two .d5,
#clock .digits div.two .d6,
#clock .digits div.two .d7,
#clock .digits div.two .d8,
#clock .digits div.two .d9,
#clock .digits div.two .d11,
#clock .digits div.two .d12,
#clock .digits div.two .d13 {
opacity: 1;
}
/* three */
#clock .digits div.three .d1,
#clock .digits div.three .d2,
#clock .digits div.three .d3,
#clock .digits div.three .d5,
#clock .digits div.three .d6,
#clock .digits div.three .d7,
#clock .digits div.three .d8,
#clock .digits div.three .d10,
#clock .digits div.three .d11,
#clock .digits div.three .d12,
#clock .digits div.three .d13 {
opacity: 1;
}
/* four */
#clock .digits div.four .d1,
#clock .digits div.four .d3,
#clock .digits div.four .d4,
#clock .digits div.four .d5,
#clock .digits div.four .d6,
#clock .digits div.four .d7,
#clock .digits div.four .d8,
#clock .digits div.four .d10,
#clock .digits div.four .d13 {
opacity: 1;
}
/* five */
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d3,
#clock .digits div.five .d4,
#clock .digits div.five .d6,
#clock .digits div.five .d7,
#clock .digits div.five .d8,
#clock .digits div.five .d10,
#clock .digits div.five .d11,
#clock .digits div.five .d12,
#clock .digits div.five .d13 {
opacity: 1;
}
/* six */
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d3,
#clock .digits div.six .d4,
#clock .digits div.six .d6,
#clock .digits div.six .d7,
#clock .digits div.six .d8,
#clock .digits div.six .d9,
#clock .digits div.six .d10,
#clock .digits div.six .d11,
#clock .digits div.six .d12,
#clock .digits div.six .d13 {
opacity: 1;
}
/* seven */
#clock .digits div.seven .d1,
#clock .digits div.seven .d2,
#clock .digits div.seven .d3,
#clock .digits div.seven .d5,
#clock .digits div.seven .d8,
#clock .digits div.seven .d10,
#clock .digits div.seven .d13 {
opacity: 1;
}
/* eight */
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7,
#clock .digits div.eight .d8,
#clock .digits div.eight .d9,
#clock .digits div.eight .d10,
#clock .digits div.eight .d11,
#clock .digits div.eight .d12,
#clock .digits div.eight .d13 {
opacity: 1;
}
/* nine */
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d6,
#clock .digits div.nine .d7,
#clock .digits div.nine .d8,
#clock .digits div.nine .d10,
#clock .digits div.nine .d11,
#clock .digits div.nine .d12,
#clock .digits div.nine .d13 {
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment