机械表小案例之transform的应用

Posted 2020-08-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了机械表小案例之transform的应用相关的知识，希望对你有一定的参考价值。

这个小案例主要是对transform的应用。

时钟的3个表针分别是3个png图片，通过setInterval来让图片转动。时，分，秒的转动角度分别是30，6，6度。

首先，通过new Date函数获取当前时间，通过date.getSeconds()，date.getMinutes(),date.getHours()获得秒，分，时，之所以按这个顺序，是因为下面的变量会有对上面的计算，如果按时，分，秒的顺序，则会报错。

其次，另外一个点，为保证平稳的从一个时间段调到另一个时间段，在设置时间时，如小时，需要将已经过去的分钟也转化为小时。var hour = date.getHours() + minute/60;其他的分，秒也要按此方法转化。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/hour.png) no-repeat center center;
        }

        #m {
            background-image: url(images/minute.png);
        }

        #s {
            background-image: url(images/second.png);
        }
    </style>
</head>
<body>
<div class="clock">
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>

<script>
    var h = document.getElementById("h");
    var m = document.getElementById("m");
    var s = document.getElementById("s");


    function setTime(){
        //获取当前时间
        var date = new Date();

        var second = date.getSeconds()+date.getMilliseconds()/1000;
        s.style.transform = "rotate("+6*second+"deg)";

        var minute = date.getMinutes()+second/60;
        m.style.transform = "rotate("+6*minute+"deg)";

        var hour = date.getHours() + minute/60;
        h.style.transform = "rotate("+30*hour+"deg)";

    }

    setTime();

    setInterval(setTime, 15);
</script>
</body>
</html>

以上是关于机械表小案例之transform的应用的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序开发之--"template模板“的应用

transform：rotate（）制作摩天轮小案例

微信小程序入门-指南针

Elasticsearch：计算多个状态更新的总持续时间 - transform 应用案例

保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记