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); }
<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>
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: 30px; left: 30px; margin: -30px 0 0 -30px; background: transparent; -webkit-border-radius: 70px; -moz-border-radius: 70px; -o-border-radius: 70px; -ms-border-radius: 70px; border-radius: 70px; } #jlClockSecondPointer{ width: 2px; height: 80px; position: absolute; top: 35px; left: 99px; margin: -30px 0 0 -30px; background: #000; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; } #jlClockMinutePointer{ width: 4px; height: 63px; position: absolute; top: 50px; left: 98px; margin: -30px 0 0 -30px; background: #2a2; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; } #jlClockMinutePointerRing{ width: 6px; height: 6px; position: absolute; top: 38px; left: 25px; margin: -30px 0 0 -30px; background: White; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; border: 4px solid #2a2; } #jlClockHourPointer{ width: 6px; height: 50px; position: absolute; top: 61px; left: 97px; margin: -30px 0 0 -30px; background: #a22; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; } #jlClockHourPointerRing{ width: 16px; height: 16px; position: absolute; top: 50px; left: 21px; margin: -30px 0 0 -30px; background: White; -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; border: 4px solid #a22; }