JS时钟

最新推荐文章于 2024-09-21 11:34:18 发布

24_hours

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量366

点赞数 1

文章标签： javascript 时钟

本文链接：https://blog.csdn.net/Web_ZhangJian/article/details/78897906

版权

JS动态时钟：
1.html代码展示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        .clock{
            margin: 200px auto;
            position: relative;
            width:1024px;
            height:1024px;
            background: url(img/time.png) no-repeat;
        }
        #hour{
            position: absolute;
            z-index: 7;
            top:193px;
            left:494px;
            width: 35px;
            height: 403px;
            transform-origin:center 317px;
        }
        #minute{
            position: absolute;
            z-index:8;
            top:52px;
            left:493px;
            width: 36px;
            height: 546px;
            transform-origin:center 460px;
        }
        #second{
            position: absolute;
            z-index: 9;
            top:40px;
            left:465px;
            width: 95px;
            height: 559px;
            transform-origin:center 473px;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div id="hour"><img src="img/hour.png" alt=""/></div>
        <div id="minute"><img src="img/minute.png" alt=""/></div>
        <div id="second"><img src="img/second.png" alt=""/></div>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/clock.js"></script>
    <!--<script src="js/clock1.js"></script>-->
</body>
</html>

2.JS代码展示：
实现时钟不停转动：

$(function(){
    function clock(){
        // 当前时间
        var now = new Date();
        // 午夜12点整
        var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
        // 当前时间与午夜12点之间的毫秒差
        var ms = now.getTime() - midnight.getTime();
        // 计算时、分、秒
        var hh = ms / (1000 * 60 * 60);
        var mm = hh * 60;
        var ss = mm * 60;
        //console.log(hh);
        //console.log(ms);
        // 实现时钟旋转
        $("#hour").css("transform","rotate(" + (hh * 30) + "deg)");
        $("#minute").css("transform","rotate(" + (mm * 6) + "deg)");
        $("#second").css("transform","rotate(" + (ss * 6) + "deg)");
    }
    setInterval(clock);
});

实现时钟机械试转动（1秒动一次）:

$(function(){
    function clock(){
        // 当前时间
        var now = new Date();
        // 计算时、分、秒
        var hh = now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();
        console.log(hh);
        // 实现时钟旋转
        $("#hour").css("transform","rotate(" + (hh * 30+(mm/60*30))+ "deg)");
        $("#minute").css("transform","rotate(" + (mm * 6+(ss/60*6))+ "deg)");
        $("#second").css("transform","rotate(" + (ss * 6) + "deg)");
    }
    setInterval(clock);
});