JS+CSS3实现时钟 - 程序员工具箱

2000万优秀解决方案库，覆盖所有编程及软件开发类，极速查询

今日已更新 526 篇代码解决方案

首页 > 代码库 > JS+CSS3实现时钟

JS+CSS3实现时钟

2024-08-05 20:21:36 220人阅读

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

效果如图：

javascript：

<script type="text/javascript" src="http://www.mamicode.com/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>

JS+CSS3实现时钟

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们