基于HTML5+CSS3实现简单的时钟效果

目的：

利用htML5，css实现钟摆效果

知识点：

1） 利用posITion/left/top和calc()实现元素的水平和垂直居中；

2） 利用CSS3的animation/transform/transform-origin属性定义动画；

3） 利用transform-origin实现旋转原点的圆心调整

废话不多说了，直接看代码吧，具体代码如下所示：

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        title>
    /title>
        style>
        li{
                list-style:none;
        }
        #box{
                width: 400px;
                height: 400px;
                position: absolute;
                top:calc(50% - 200px);
                left:calc(50% - 200px);
                border: 2px solid palegoldenrod;
        }
        #dial{
                width: 200px;
                height: 200px;
                position: absolute;
                top:calc(50% - 100px);
                left:calc(50% - 100px);
                border: 2px solid cyan;
                border-radius: 50%;
        }
           .scaleIndex{
                width: 4px;
                height: 12px;
                position: absolute;
                top: 0;
                left: calc(50% - 2px);
                background-color: gray;
                transform-origin: 2px 100px;
        }
        .angle30{
    transform : rotate(30deg);
}
        .angle60{
    transform : rotate(60deg);
}
        .angle90{
    transform : rotate(90deg);
}
        .angle120{
    transform : rotate(120deg);
}
        .angle150{
    transform : rotate(150deg);
}
        .angle180{
    transform : rotate(180deg);
}
        .angle210{
    transform : rotate(210deg);
}
        .angle240{
    transform : rotate(240deg);
}
        .angle270{
    transform : rotate(270deg);
}
        .angle300{
    transform : rotate(300deg);
}
        .angle330{
    transform : rotate(330deg);
}
        #fixpoint{
                width: 10px;
                height: 10px;
                position: absolute;
                top:calc(50% - 5px);
                left:calc(50% - 5px);
                background-color: CADetblue;
                border-radius: 50%;
        }
        #hourHand{
                width: 6px;
                height: 70px;
                position:absolute;
                top: 40px;
                left: calc(50% - 3px);
                background-color: darkblue;
                transform-origin: 50% 60px;
        }
        #minuteHand{
                width: 4px;
                height: 75px;
                position:absolute;
                top: 35px;
                left: calc(50% - 2px);
                background-color: yellow;
                transform-origin: 50% 65px;
        }
        #secondHand{
                width: 2px;
                height: 90px;
                position:absolute;
                top: 20px;
                left: calc(50% - 1px);
                background-color: red;
                transform-origin: 50% 80px;
        }
        /style>
    /head>
    body>
        div id = "box">
                div id = 'dial'>
                    ul id = "scale">
                        li class = "scaleIndex">
    /li>
                        li class = "scaleIndex angle30">
    /li>
                        li class = "scaleIndex angle60">
    /li>
                        li class = "scaleIndex angle90">
    /li>
                        li class = "scaleIndex angle120">
    /li>
                        li class = "scaleIndex angle150">
    /li>
                        li class = "scaleIndex angle180">
    /li>
                        li class = "scaleIndex angle210">
    /li>
                        li class = "scaleIndex angle240">
    /li>
                        li class = "scaleIndex angle270">
    /li>
                        li class = "scaleIndex angle300">
    /li>
                        li class = "scaleIndex angle330">
    /li>
                    /ul>
                    div id = "fixPoint">
    /div>
                    div id = "hourHand">
    /div>
                    div id = "minuteHand">
    /div>
                    div id = "secondHand">
    /div>
                /div>
            /div>
    script type = 'text/javascript' src = 'js/jquery-3.2.1.js'>
    /script>
    script type = "text/javascript">
window.onload = function(){
                VAR hourHand = document.getElementById('hourHand');
                var minuteHand = document.getElementById('minuteHand');
                var secondHand = document.getElementById('secondHand');
setInterval(function(){
                        var currentTime = new Date();
                        var hourValue = currentTime.getHours();
                        var hourAngle = hourValue / 24 * 360 + 'deg';
                        var minuteValue = currentTime.getMinutes();
                        var minuteAngle = minuteValue / 60 * 360 + 'deg';
                        var secondValue = currentTime.getSeconds();
                        var secondAngle = secondValue / 60 * 360 + 'deg';
                        console.LOG(hourAngle);
    // 方法一：利用jquery的css()增加属性var cmdHour = 'rotate('+ hourAngle +')';
$('#hourHand').css({
transform:'rotate('+ hourAngle +')'}
    );
    var cmdMinute = 'rotate('+ minuteAngle +')';
$('#minuteHand').css({
transform:cmdMinute}
    );
    var cmdSecond = 'rotate('+ secondAngle +')';
$('#secondHand').css({
transform:cmdSecond}
    );
    // 方法二：利用DOM元素的style属性设置//      hourHand.style.transform = 'rotate('+ hourAngle + ')';
    //      minuteHand.style.transform = 'rotate('+ minuteAngle + ')';
    //      secondHand.style.transform = 'rotate('+ secondAngle + ')';
  }
    ,1000);
}
        /script>
    /body>
    /html>
    

总结

以上所述是小编给大家介绍的基于HTML5+CSS3实现简单的时钟效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！