1
2
3
4
5
6
7
8
<div id="box" class="box">
        <ul id="ul" class="ul"></ul>
        <div id="s" class="s"></div>
        <div id="f" class="f"></div>
        <div id="m" class="m"></div>
        <div class="yd"></div>
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var ul = document.getElementById("ul");
var s = document.getElementById("s");
var f = document.getElementById("f");
var m = document.getElementById("m");
var lis = [];
var num = 1;
for (var i = 1; i <= 60; i++) {
    lis[i] = document.createElement("li");
    if (i % 5 == 0) {
        lis[i].innerHTML = "<span><i>" + num + "</i></span>";
        num++;
    } else {
        lis[i].innerHTML = "<span></span>";
    }
    ul.appendChild(lis[i]);
    lis[i].style.transform = "rotate(" + i * 6 + "deg)";
}
sj();
function sj() {
    var time = new Date(); //中国标准时间
    var timeHours = time.getHours(); //时
    var timeMinutes = time.getMinutes(); //分
    var timeSecends = time.getSeconds(); //秒
    if (timeSecends < 60) {
        m.style.background = "#000";
        m.style.transform = "rotate(" + timeSecends * 6 + "deg)";
    }
    if (timeMinutes < 60) {
        f.style.background = "blue";
        f.style.transform = "rotate(" + timeMinutes * 6 + "deg)";
    }
    if (timeHours < 60) {
        s.style.background = "red";
        s.style.transform = "rotate(" + timeHours * 6 + "deg)";
    }
}
setInterval(function() {
    sj();
}, 1000)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX