clock (hands)

HTML架構如下(html structure)：

<div class="clock">
    <div class="centerDot"></div>
    <div class="secHand"></div>
    <div class="minuHand"></div>
    <div class="hourHand"></div>
    <div class="number1 number">1</div>
    <div class="number2 number">2</div>
    <div class="number3 number">3</div>
    <div class="number4 number">4</div>
    <div class="number5 number">5</div>
    <div class="number6 number">6</div>
    <div class="number7 number">7</div>
    <div class="number8 number">8</div>
    <div class="number9 number">9</div>
    <div class="number10 number">10</div>
    <div class="number11 number">11</div>
    <div class="number12 number">12</div>
</div>

css定位如下(number定位放在 jq )
set position：

.clock {
    position: relative;
    border-radius: 50%;
    width: 500px;
    height: 500px;
    background-color: #cba;    
}
.centerDot {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #c61;
    border-radius: 50%;
    z-index: 11;
}
.secHand, .minuHand, .hourHand {
    position: absolute;
    width: 10px;    
    left: 0;
    right: 0;
    top: 0;    
    margin: auto;    
    transform-origin: center bottom;
    box-shadow: 0px 0px 6px #666;
    border-radius: 50% 50% 0% 0%;
}
.secHand {
    width: 5px;
    background-color: #ddd;
    border: 1px solid #666;
    height: 45%;
    bottom: 45%;
    z-index: 10;
}
.minuHand {
    background-color: #fa2;
    height: 35%;
    bottom: 35%;
}
.hourHand {
    background-color: #e11;
    height: 20%;
    bottom: 20%;
}

.number {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 18px;
}

jq語法如下：

    //秒針
    function secMove() {
        var seconds = new Date().getSeconds();
        var secDegree = seconds * 6;
        var miniSecond = new Date().getMilliseconds();
        var miniDegree = miniSecond * 6 / 1000;
        var secRotate = "rotate(" + (secDegree + miniDegree) + "deg)";

        $('.secHand').css({ "transform": secRotate });

        setTimeout( secMove, 100 );                                   //10FPS

    }

    secMove();

    //分針

    function minuMove() {
        var minutes = new Date().getMinutes();
        var minuDegree = minutes * 6;
        var minuRotate = "rotate(" + minuDegree + "deg)";

        $('.minuHand').css({ "transform": minuRotate });

        setTimeout( minuMove, 1000 );

    }

    minuMove();

    //時針

    function hourMove() {
        var minutes = new Date().getMinutes();
        var hours = new Date().getHours();
        var hourDegree = hours * 30 + minutes / 2;     //每一分鐘 角度多0.5度
        var hourRotate = "rotate(" + hourDegree + "deg)";

        $('.hourHand').css({ "transform": hourRotate });

        setTimeout( hourMove, 1000 );

    }

    hourMove();

    //*********************
    //   以下數字定位
    //*********************
    var x1 = Math.sin(Math.PI / 3) * 450;  //450為圓半徑的90%
    var x2 = Math.cos(Math.PI / 3) * 450;
    var x3 = Math.sin(Math.PI / 6) * 450;
    var x4 = Math.cos(Math.PI / 6) * 450;

    $('.number1').css({'bottom': x1,'left': x2});

    $('.number2').css({'bottom': x3,'left': x4});

    $('.number3').css({'left': 450});

    $('.number4').css({'top': x3,'left': x4});

    $('.number5').css({'top': x1,'left': x2});

    $('.number6').css({'top': 450});

    $('.number7').css({'top': x1,'right': x2});

    $('.number8').css({'top': x3,'right': x4});

    $('.number9').css({'right': 450});

    $('.number10').css({'bottom': x3,'right': x4});

    $('.number11').css({'bottom': x1,'right': x2});

    $('.number12').css({'bottom': 450,'left': 9});  //9是文字size的誤差

        

以上為直線思考
數字定位你也可以這樣做：

<div class="clock">
    <div class="centerDot"></div>
    <div class="secHand"></div>
    <div class="minuHand"></div>
    <div class="hourHand"></div>
</div>

稍後用jq去加.number的div


css基本上沒變

.number {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 18px;
    text-align: center;
}

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

上述置中可以省去因width和height的位置誤差

以下jq：

    var degr = Math.PI / 6 ;   //單位角度30度
    var number ,i ,x ,y ;

    for( i =1; i<13; i++){
          number = $('<div class="number"></div>');
          x = 450 * Math.sin( degr * i );          //水平位移
          y = 450 * Math.cos( degr * i );         //垂直位移
          number.css({ left : x , 'bottom' : y});

          number.text(i);

          $('.clock').append( number );

    }