JSDM

HTML

11
 
1
#table
2
   - var i = 0
3
   while i < 6
4
     .row
5
       - var j = 0
6
       while j < 20
7
         .cell
8
           .dial.pos-3
9
           .dial.pos-0
10
         -j++
11
     -i++
!

CSS

xxxxxxxxxx
60
 
1
* {
2
  margin: 0;
3
  padding: 0;
4
}
5
body {
6
  background-color: #888;
7
}
8
#table {
9
  margin-top: calc(50vh - 15vw);
10
  width: 100%;
11
}
12
.row {
13
  width: 100%;
14
}
15
.dial {
16
  font-size: 14px;
17
  width:8px;
18
  height: 50%;
19
  position: absolute;
20
  top:0;
21
  left: calc(50% - 4px);
22
  background-color: #BA4545;
23
  transform-origin: 50% 100%;
24
  -webkit-transition: transform .75s, box-shadow .75s;
25
  transition: transform .75s, box-shadow .75s;
26
  border-radius: 4px;
27
  
28
}
29
.pos-0 {
30
    -webkit-transform: rotate(0deg);
31
    transform: rotate(0deg);
32
    box-shadow: 2px 2px 2px rgba(0,0,0,.3);
33
}
34
.pos-1 {
35
    -webkit-transform: rotate(90deg);
36
    transform: rotate(90deg);
37
    box-shadow: 2px -2px 2px rgba(0,0,0,.3);
38
}
39
.pos-2 {
40
    -webkit-transform: rotate(180deg);
41
    transform: rotate(180deg);
42
    box-shadow: -2px -2px 2px rgba(0,0,0,.3);
43
}
44
.pos-3 {
45
    -webkit-transform: rotate(270deg);
46
    transform: rotate(270deg);
47
    box-shadow: -2px 2px 2px rgba(0,0,0,.3);
48
}
49
.cell {
50
  position: relative;
51
  width: 5%;
52
  height: 5vw;
53
  float: left;
54
  border: 1px solid #ddd;
55
  border-radius: 50%;
56
  box-sizing: border-box;
57
  -moz-box-sizing: border-box;
58
  box-shadow: inset 5px 5px 5px rgba(0,0,0,.2), 2px 2px 2px rgba(0,0,0,.5);
59
  background-color: #fff;
60
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

31
 
1
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]]]];
2
function showTime() {
3
  function pad(num) {
4
    return num.toString().length < 2 ?  '0' + num.toString() : num.toString();
5
  }
6
  function mergeMatrix (matrixA, matrixB) {
7
    var newMatrix = [];
8
    for (var i = 0; i < matrixA.length; i++) {
9
      newMatrix.push(matrixA[i].slice(0).concat(matrixB[i].slice(0)));
10
    }
11
    return newMatrix;
12
  }
13
  var date = new Date();
14
  var str = pad(date.getHours()) + pad(date.getMinutes()) + pad(date.getSeconds());
15
  var numMatrix = nums[str[0]];
16
  for (var  i = 1; i < str.length; i++) {
17
    numMatrix = mergeMatrix(numMatrix, nums[str[i]]);
18
    if (i === 1 || i === 3) {
19
      numMatrix = mergeMatrix(numMatrix, [[[1,3]],[[1,3]],[[1,3]],[[1,3]],[[1,3]],[[1,3]]]);
20
    }
21
  }
22
  var table = document.getElementById('table');
23
  [].slice.call(table.children).forEach(function(row,j){
24
    [].slice.call(row.children).forEach(function(cell,i){
25
      window.setTimeout(function(){cell.children[0].className = 'dial pos-' + numMatrix[j][i][0];},~~(Math.random() * 250));
26
      window.setTimeout(function(){cell.children[1].className = 'dial pos-' + numMatrix[j][i][1];},~~(Math.random() * 250));     
27
    });
28
  });
29
}
30
window.setTimeout(showTime, 500);
31
window.setInterval(showTime,1000);
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................