#table
- var i = 0
while i < 6
.row
- var j = 0
while j < 20
.cell
.dial.pos-3
.dial.pos-0
-j++
-i++
xxxxxxxxxx
* {
margin: 0;
padding: 0;
}
body {
background-color: #888;
}
#table {
margin-top: calc(50vh - 15vw);
width: 100%;
}
.row {
width: 100%;
}
.dial {
font-size: 14px;
width:8px;
height: 50%;
position: absolute;
top:0;
left: calc(50% - 4px);
background-color: #BA4545;
transform-origin: 50% 100%;
transition: transform .75s, box-shadow .75s;
transition: transform .75s, box-shadow .75s;
border-radius: 4px;
}
.pos-0 {
transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.pos-1 {
transform: rotate(90deg);
transform: rotate(90deg);
box-shadow: 2px -2px 2px rgba(0,0,0,.3);
}
.pos-2 {
transform: rotate(180deg);
transform: rotate(180deg);
box-shadow: -2px -2px 2px rgba(0,0,0,.3);
}
.pos-3 {
transform: rotate(270deg);
transform: rotate(270deg);
box-shadow: -2px 2px 2px rgba(0,0,0,.3);
}
.cell {
position: relative;
width: 5%;
height: 5vw;
float: left;
border: 1px solid #ddd;
border-radius: 50%;
box-sizing: border-box;
box-sizing: border-box;
box-shadow: inset 5px 5px 5px rgba(0,0,0,.2), 2px 2px 2px rgba(0,0,0,.5);
background-color: #fff;
}
var nums = [[[[1,2],[1,3],[2,3]],[[0,2],[2,2],[0,2]],[[0,2],[0,2],[0,2]],[[0,2],[0,2],[0,2]],[[0,2],[0,0],[0,2]],[[0,1],[1,3],[0,3]]],[[[0,0],[1,2],[2,3]],[[0,0],[0,2],[0,2]],[[0,0],[0,2],[0,2]],[[0,0],[0,2],[0,2]],[[0,0],[0,2],[0,2]],[[0,0],[0,1],[0,3]]],[[[1,2],[1,3],[2,3]],[[0,1],[2,3],[0,2]],[[1,2],[0,3],[0,2]],[[0,2],[1,2],[0,3]],[[0,2],[0,1],[2,3]],[[0,1],[1,3],[0,3]]],[[[1,2],[1,3],[2,3]],[[0,1],[2,3],[0,2]],[[1,2],[0,3],[0,2]],[[0,1],[2,3],[0,2]],[[1,2],[0,3],[0,2]],[[0,1],[1,3],[0,3]]],[[[1,2],[2,3],[2,3]],[[0,2],[0,2],[0,2]],[[0,2],[0,1],[0,2]],[[0,1],[2,3],[0,2]],[[0,0],[0,2],[0,2]],[[0,0],[0,1],[0,3]]],[[[1,2],[1,3],[2,3]],[[0,2],[1,2],[0,3]],[[0,2],[0,1],[2,3]],[[0,1],[2,3],[0,2]],[[1,2],[0,3],[0,2]],[[0,1],[1,3],[0,3]]],[[[1,2],[1,3],[2,3]],[[0,2],[1,2],[0,3]],[[0,2],[0,1],[2,3]],[[0,2],[2,2],[0,2]],[[0,2],[0,0],[0,2]],[[0,1],[1,3],[0,3]]],[[[1,2],[1,3],[2,3]],[[0,1],[2,3],[0,2]],[[0,0],[0,2],[0,2]],[[0,0],[0,2],[0,2]],[[0,0],[0,2],[0,2]],[[0,0],[0,1],[0,3]]],[[[1,2],[1,3],[2,3]],[[0,2],[2,2],[0,2]],[[0,2],[0,0],[0,2]],[[0,2],[2,2],[0,2]],[[0,2],[0,0],[0,2]],[[0,1],[1,3],[0,3]]],[[[1,2],[1,3],[2,3]],[[0,2],[2,2],[0,2]],[[0,2],[0,0],[0,2]],[[0,1],[2,3],[0,2]],[[1,2],[0,3],[0,2]],[[0,1],[1,3],[0,3]]]];
function showTime() {
function pad(num) {
return num.toString().length < 2 ? '0' + num.toString() : num.toString();
}
function mergeMatrix (matrixA, matrixB) {
var newMatrix = [];
for (var i = 0; i < matrixA.length; i++) {
newMatrix.push(matrixA[i].slice(0).concat(matrixB[i].slice(0)));
}
return newMatrix;
}
var date = new Date();
var str = pad(date.getHours()) + pad(date.getMinutes()) + pad(date.getSeconds());
var numMatrix = nums[str[0]];
for (var i = 1; i < str.length; i++) {
numMatrix = mergeMatrix(numMatrix, nums[str[i]]);
if (i === 1 || i === 3) {
numMatrix = mergeMatrix(numMatrix, [[[1,3]],[[1,3]],[[1,3]],[[1,3]],[[1,3]],[[1,3]]]);
}
}
var table = document.getElementById('table');
[].slice.call(table.children).forEach(function(row,j){
[].slice.call(row.children).forEach(function(cell,i){
window.setTimeout(function(){cell.children[0].className = 'dial pos-' + numMatrix[j][i][0];},~~(Math.random() * 250));
window.setTimeout(function(){cell.children[1].className = 'dial pos-' + numMatrix[j][i][1];},~~(Math.random() * 250));
});
});
}
window.setTimeout(showTime, 500);
window.setInterval(showTime,1000);