这个小案例主要是对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的应用的更多相关文章

  1. ES6基础与解构赋值（高颜值弹框小案例！）

    let只作用在当前块级作用域内使用let或者const声明的变量,不能再被重新声明let不存在`变量提升` console.log(dad); var dad = '我是爸爸!';//预定义undef ...

  2. shell讲解-小案例

    shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...

  3. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  4. 02SpringMvc_springmvc快速入门小案例（XML版本）

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

  5. React.js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. SqlDependency缓存数据库表小案例

    SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...

  7. JavaScript apply函数小案例

    //回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...

  8. Session小案例------完成用户登录

    Session小案例------完成用户登录     在项目开发中,用户登陆功能再平常只是啦,当用户完毕username和password校验后.进入主界面,须要在主界面中显示用户的信息,此时用ses ...

  9. ch1-vuejs基础入门（hw v-bind v-if v-for v-on v-model 应用组件简介 小案例）

    1 hello world 引入vue.min.js 代码: ----2.0+版本 <div id="test"> {{str}} </div> <s ...

随机推荐

  1. failed to open the runspace pool. the server manager winrm plug-in might be corrupted or missing

    添加对127.0.0.1的监听 netsh http add iplisten 127.0.0.01 添加完后的效果

  2. 【译】Permissions Best Practices Android M权限最佳做法

    Permissions Best Practices PreviousNext In this document Consider Using an Intent Don't Overwhelm th ...

  3. 用jQuery Mobile做HTML5移动应用的三个优缺点

    JQuery Mobile 和 HTML5 的 3个优点 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobi ...

  4. DOM4J的使用

    http://blog.csdn.net/redarmy_chen/article/details/12969219 http://blog.csdn.net/wlbing0625/article/d ...

  5. Android 数据库管理— — —创建数据库

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...

  6. 移动测试主要使用的测试框架，基于python

    1.uiautomator google自己的测试框架,可以跨应用测试, 语言支持java,python也可以在GitHub上找到封装的包,去调用uiautomator. 2.Robotium jav ...

  7. swift 构建类

    参开 http://blog.csdn.net/chelongfei/article/details/49784633 在 Swift 中, 类的初始化有两种方式, 分别是 Designated In ...

  8. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  9. 从service弹出系统级自定义提示框，可在任意页面弹出

    添加权限 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> // 显示 ...

  10. [转]jq选择器

    jQuery-强大的jQuery选择器 (详解)[转] 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 ...