JS+CSS3实现时钟

 

       使用js和css3实现的时钟效果，支持firefox，chrom等标准浏览器。下载

 

       效果如图：

 

 

javascript：

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
    function rotateHand() {
        var myDate = new Date();
        var s = myDate.getSeconds();
        var m = myDate.getMinutes();
        var h = myDate.getHours();
        var timeNow = h + ":" + m + ":" + s;
     
        var sRotate = s / 60 * 360;
        var mRotate = m / 60 * 360 + 6 * s / 60;
        var hRotate = (h>12?h-12:h) / 12 * 360 + 30 * m / 60;
     
        $("#second_hand").attr('style', 'transform:rotate(' + sRotate + 'deg)');
        $("#minute_hand").attr('style', 'transform:rotate(' + mRotate + 'deg)');
        $("#hour_hand").attr('style', 'transform:rotate(' + hRotate + 'deg)');
     
        $("#time_now").empty().append(timeNow);
    }
     
     
    setInterval(rotateHand,200);
})
</script>

css：

<style type="text/css">
#clock_box {
    width: 500px;
    height: 500px;
    border-radius: 250px;
    background: #f2f2f2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}
    
.clock_h {
    width: 4px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2px;
    z-index: 1;
}
    
.clock_h:before {
    content: "";
    display: block;
    width: 4px;
    height: 10px;
    position: absolute;
    top: 10px;
    left: 0;
    background: #000;
}
    
.clock_h:after {
    content: "";
    display: block;
    width: 4px;
    height: 10px;
    position: absolute;
    left: 0;
    bottom: 10px;
    background: #000;
}
    
#clock_1 { transform:rotate(30deg); }
#clock_2 { transform:rotate(60deg); }
#clock_3 { transform:rotate(90deg); }
#clock_4 { transform:rotate(120deg); }
#clock_5 { transform:rotate(150deg); }
#clock_6 { transform:rotate(180deg); }
    
.clock_m {
    width: 2px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    z-index: 1;
}
    
.clock_m:before {
    content: "";
    display: block;
    width: 2px;
    height: 5px;
    position: absolute;
    top: 10px;
    left: 0;
    background: #4d4d4d;
}
    
.clock_m:after {
    content: "";
    display: block;
    width: 2px;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 10px;
    background: #4d4d4d;
}
    
#clock_1_1 { transform:rotate(36deg); }
#clock_1_2 { transform:rotate(42deg); }
#clock_1_3 { transform:rotate(48deg); }
#clock_1_4 { transform:rotate(54deg); }
    
#clock_2_1 { transform:rotate(66deg); }
#clock_2_2 { transform:rotate(72deg); }
#clock_2_3 { transform:rotate(78deg); }
#clock_2_4 { transform:rotate(84deg); }
    
#clock_3_1 { transform:rotate(96deg); }
#clock_3_2 { transform:rotate(102deg); }
#clock_3_3 { transform:rotate(108deg); }
#clock_3_4 { transform:rotate(114deg); }
    
#clock_4_1 { transform:rotate(126deg); }
#clock_4_2 { transform:rotate(132deg); }
#clock_4_3 { transform:rotate(138deg); }
#clock_4_4 { transform:rotate(144deg); }
    
#clock_5_1 { transform:rotate(156deg); }
#clock_5_2 { transform:rotate(162deg); }
#clock_5_3 { transform:rotate(168deg); }
#clock_5_4 { transform:rotate(174deg); }
    
#clock_6_1 { transform:rotate(186deg); }
#clock_6_2 { transform:rotate(192deg); }
#clock_6_3 { transform:rotate(198deg); }
#clock_6_4 { transform:rotate(204deg); }
    
#hour_hand {
    width: 10px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
    z-index: 2;
}
    
#hour_hand:after {
    content: "";
    display: block;
    width: 10px;
    height: 180px;
    position: absolute;
    left: 0;
    bottom: 230px;
    background: #333;
}
    
#minute_hand {
    width: 6px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -3px;
    z-index: 3;
}
    
#minute_hand:after {
    content: "";
    display: block;
    width: 6px;
    height: 210px;
    position: absolute;
    left: 0;
    bottom:230px;
    background: #4d4d4d;
}
    
#second_hand {
    width: 2px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    z-index: 4;
}
    
#second_hand:after {
    content: "";
    display: block;
    width: 2px;
    height: 268px;
    position: absolute;
    left: 0;
    bottom:230px;
    background: red;
}
    
#clock_center {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    background: red;
    z-index: 5;
}
    
#t1,#t2,#t3,#t4,#t5,#t6,#t7,#t8,#t9,#t10,#t11,#t12 {
    position: absolute;
    width: 20px;
    height: 20px;
    font: 16px/20px Arial, Helvetica, sans-serif;
    text-align: center;
}
    
#t1 {
    top: 55px;
    left: 345px;
}
    
#t2 {
    top: 130px;
    left: 425px;
}
    
#t3 {
    top: 240px;
    right: 25px;
}
    
#t4 {
    bottom: 130px;
    left: 425px;
}
    
#t5 {
    bottom: 55px;
    left: 345px;
}
    
#t6 {
    bottom: 25px;
    left: 240px;
}
    
#t7 {
    bottom: 55px;
    left: 135px;
}
    
#t8 {
    bottom: 130px;
    left: 60px;
}
    
#t9 {
    top: 240px;
    left: 25px;
}
    
#t10 {
    top: 130px;
    left: 60px;
}
    
#t11 {
    top: 55px;
    left: 135px;
}
    
#t12 {
    top: 25px;
    left: 240px;
}
    
#time_now {
    width: 120px;
    height: 40px;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -60px;
    background: rgba(0,0,0,0.03);
    text-align: center;
    color: #15abdc;
    text-shadow: 0 1px 0 #fff;
    font: 20px/40px Arial, Helvetica, sans-serif;
    box-shadow: 0 1px 0 #fff,
                0 1px 1px rgba(0,0,0,0.05) inset;
}
    
</style>

html：

<div id="clock_box">
    <div id="clock_center"></div>
    
    <div id="hour_hand"></div>
    <div id="minute_hand"></div>
    <div id="second_hand"></div>
    
    <div id="clock_1" class="clock_h"></div>
    <div id="clock_2" class="clock_h"></div>
    <div id="clock_3" class="clock_h"></div>
    <div id="clock_4" class="clock_h"></div>
    <div id="clock_5" class="clock_h"></div>
    <div id="clock_6" class="clock_h"></div>
    
    <div id="clock_1_1" class="clock_m"></div>
    <div id="clock_1_2" class="clock_m"></div>
    <div id="clock_1_3" class="clock_m"></div>
    <div id="clock_1_4" class="clock_m"></div>
    <div id="clock_2_1" class="clock_m"></div>
    <div id="clock_2_2" class="clock_m"></div>
    <div id="clock_2_3" class="clock_m"></div>
    <div id="clock_2_4" class="clock_m"></div>
    <div id="clock_3_1" class="clock_m"></div>
    <div id="clock_3_2" class="clock_m"></div>
    <div id="clock_3_3" class="clock_m"></div>
    <div id="clock_3_4" class="clock_m"></div>
    <div id="clock_4_1" class="clock_m"></div>
    <div id="clock_4_2" class="clock_m"></div>
    <div id="clock_4_3" class="clock_m"></div>
    <div id="clock_4_4" class="clock_m"></div>
    <div id="clock_5_1" class="clock_m"></div>
    <div id="clock_5_2" class="clock_m"></div>
    <div id="clock_5_3" class="clock_m"></div>
    <div id="clock_5_4" class="clock_m"></div>
    <div id="clock_6_1" class="clock_m"></div>
    <div id="clock_6_2" class="clock_m"></div>
    <div id="clock_6_3" class="clock_m"></div>
    <div id="clock_6_4" class="clock_m"></div>
    
    <div id="t1">1</div>
    <div id="t2">2</div>
    <div id="t3">3</div>
    <div id="t4">4</div>
    <div id="t5">5</div>
    <div id="t6">6</div>
    <div id="t7">7</div>
    <div id="t8">8</div>
    <div id="t9">9</div>
    <div id="t10">10</div>
    <div id="t11">11</div>
    <div id="t12">12</div>
    
    <div id="time_now">5:30:25</div>
</div>