• 微信号:Zh-y9213
您当前的位置:爱资源分享网 > > 网站源码 > 网页特效

CSS3 3D立体感指针时钟代码

栏目:网页特效时间:2021-11-08 21:27阅读数:42人阅读
一款漂亮的基于CSS3+JS实现钟表特效,界面设计带有3D立体感的CSS3指针时钟走动代码。


js代码

<script type="text/javascript">
    var miao = document.getElementById("miao");
    var fen = document.getElementById("fen");
    var shi = document.getElementById("shi");

    var clock = setInterval(function () {
        var nowDate = new Date();//每次读取当前时间
        var hour = nowDate.getHours();
        var minute = nowDate.getMinutes();
        var second = nowDate.getSeconds();

        var circleHour = hour % 12 * 30;
        shi.style.transform = "rotate(" + circleHour + "deg)";//读取到的时间为24小时制,转换为12小时
        fen.style.transform = "rotate(" + minute * 6 + "deg)";
        miao.style.transform = "rotate(" + second * 6 + "deg)";
    }, 1000);
</script>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:737597453@qq.com