jlClock

by Johnny Lee

HTML

<div>
    <div class="jlClockBody">
        <div id="jlClockNumbers">
            <span id="jlClockNumber01">1</span>
            <span id="jlClockNumber02">2</span>
            <span id="jlClockNumber03">3</span>
            <span id="jlClockNumber04">4</span>
            <span id="jlClockNumber05">5</span>
            <span id="jlClockNumber06">6</span>
            <span id="jlClockNumber07">7</span>
            <span id="jlClockNumber08">8</span>
            <span id="jlClockNumber09">9</span>
            <span id="jlClockNumber10">10</span>
            <span id="jlClockNumber11">11</span>
            <span id="jlClockNumber12">12</span>
        </div>
        <div>
            <span id="jlClockTitle">
                <a href="http://aspnet2share.blogspot.com/2012/03/css3-css3-html.html" target="_blank">jlClock V1.0</a>
            </span>
        </div>
        <div>
            <div id="jlClockHourArea">                    
                <span id="jlClockHourPointer" />
                <!--<span id="jlClockHourPointerRing" />-->
            </div>
        </div>
        <div>
            <div id="jlClockMinuteArea">
                <span id="jlClockMinutePointer" />
                <!--<span id="jlClockMinutePointerRing" />-->
            </div>
        </div>
        <div>
            <div id="jlClockSecondArea">
                <span id="jlClockSecondPointer" />
            </div>
        </div>
        <div>
            <span id="jlClockShowAm">
                AM
            </span>
        </div>
        <div>
            <span id="jlClockShowPm">
                PM
            </span>
        </div>

    </div>
</div>

CSS

div .jlClockBody
{
    width: 140px; height: 140px;
    position: absolute;
    top: 50px; left: 50px;
    margin: -30px 0 0 -30px;
    background: rgba(180, 240, 198, .1);
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    -o-border-radius: 70px;
    -ms-border-radius: 70px;
    border-radius: 70px;
    border-top: 1px solid #777;
    border-right: 1px solid #777;
    border-bottom: 4px solid #aaa;
    border-left: 4px solid #aaa;
}
#jlClockTitle
{
    color: #555;
    text-align: center;
    position: absolute;
    font-family: 微軟正黑體, Verdana, Arial;
    font-size: 0.6em;
    top: 84px; left: 38px;
}
#jlClockNumbers
{
    font-family: Magneto, Stencil, Verdana, Arial;
    font-weight: normal;
    font-size: 0.9em;
    color: #66C;
    text-shadow: 1px 1px 2px #666;
}
#jlClockNumber01
{
    position: absolute;
    top: 14px; left: 92px;
}
#jlClockNumber02
{
    position: absolute;
    top: 32px; left: 112px;
}
#jlClockNumber03
{
    position: absolute;
    top: 59px; left: 120px;
}
#jlClockNumber04
{
    position: absolute;
    top: 87px; left: 112px;
}
#jlClockNumber05
{
    position: absolute;
    top: 107px; left: 92px;
}
#jlClockNumber06
{
    position: absolute;
    top: 114px; left: 65px;
}
#jlClockNumber07
{
    position: absolute;
    top: 107px; left: 37px;
}
#jlClockNumber08
{
    position: absolute;
    top: 87px; left: 15px;
}
#jlClockNumber09
{
    position: absolute;
    top: 59px; left: 10px;
}
#jlClockNumber10
{
    position: absolute;
    top: 32px; left: 13px;
}
#jlClockNumber11
{
    position: absolute;
    top: 14px; left: 34px;
}
#jlClockNumber12
{
    position: absolute;
    top: 7px; left: 59px;
}
#jlClockShowAm, #jlClockShowPm
{
    color: #3366FF;
    text-align: right;
    position: absolute;
    font-family: Verdana, Arial;
    font-size: 0.7em;
    top: 124px; left: 117px;
}
#jlClockSecondArea, #jlClockMinuteArea, #jlClockHourArea
{
    display: block;
    width: 140px; height: 140px;
    position: absolute;
    top:...

JavaScript

var timerSecond = 0;
$(document).ready(function () {
    $(function () {
        timerSecond = self.setInterval('tickSecond()', 1000);
    });

});

function tickSecond() {
    var d = new Date();
    var sSec = d.getSeconds();
    var sMin = d.getMinutes();
    var sHr = d.getHours();
    if (sHr > 11) {
        $('#jlClockShowAm').hide();
        $('#jlClockShowPm').show();
    } else {
        $('#jlClockShowAm').show();
        $('#jlClockShowPm').hide();
    }
    var degSec = 'rotate(' + sSec * 6 + 'deg)';
    var degMin = 'rotate(' + (sMin * 6 + sSec * 0.1) + 'deg)';
    var degHr = 'rotate(' + ((sHr % 12) * 30 + sMin / 2) + 'deg)';
    // For Chrome and Safari support
    $('#jlClockSecondArea').css('-webkit-transform', degSec);
    $('#jlClockMinuteArea').css('-webkit-transform', degMin);
    $('#jlClockHourArea').css('-webkit-transform', degHr);
    // For FireFox support
    $('#jlClockSecondArea').css('-moz-transform', degSec);
    $('#jlClockMinuteArea').css('-moz-transform', degMin);
    $('#jlClockHourArea').css('-moz-transform', degHr);
    // For Opera support
    $('#jlClockSecondArea').css('-o-transform', degSec);
    $('#jlClockMinuteArea').css('-o-transform', degMin);
    $('#jlClockHourArea').css('-o-transform', degHr);
    // For IE support
    $('#jlClockSecondArea').css('-ms-transform', degSec);
    $('#jlClockMinuteArea').css('-ms-transform', degMin);
    $('#jlClockHourArea').css('-ms-transform', degHr);;
    // For general support
    $('#jlClockSecondArea').css('transform', degSec);
    $('#jlClockMinuteArea').css('transform', degMin);
    $('#jlClockHourArea').css('transform', degHr);
};

function stopClock() {
    clearInterval(timerSecond);
}