这个小案例主要是对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. Eclipse中怎么安装TestNG单元测试框架

    在进行使用的eclipse的进行开发的代码中,必然就会需要进行单元测试,在单元测试的情况提供较多的框架单元测试,例如使用junit单元测试,而在国外进行开发较好的单元测试,提供了较好的测试的报告,ju ...

  2. 算法：寻找maximum subarray

    <算法导论>一书中演示分治算法的第二个例子,第一个例子是递归排序,较为简单.寻找maximum subarray稍微复杂点. 题目是这样的:给定序列x = [1, -4, 4, 4, 5, ...

  3. 基本ASP的语法规则

    1.ASP 文件能够包含服务器端脚本,这些脚本被分隔符 <% 和%> 包围起来. 服务器脚本在服务器上执行,可包含合法的表达式.语句.或者运算符. 向浏览器写输出,用命令response. ...

  4. 启动Mysql服务提示Can’t connect to local MySQL server through socket的解决方法

    启动Mysql服务常会提示下面错误: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/ ...

  5. Web前端开发的前景与用处

    随着时代的发展,现在从事IT方向的人有很多,所以励志要成为前端开发工程师的人有很多.当然也有很多人在犹豫不知道该从事哪个方向,我今天就是来给大家分析一下Web前端开发的前景.包括工作内容,发展前景和薪 ...

  6. CocoaPods介绍。如何安装Ruby环境，如何下载和安装CocoaPods？

    CocoaPods介绍? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其 ...

  7. UITabBarController使用总结

    刚看了几天教程就开始跟着开发了,以前也没学过C,太痛苦了~只能看看大神的博客,自己再总结学习一下了. 1.首先新建一个TabBarViewController继承于UITabBarController ...

  8. linux下内存泄露检测工具Valgrind介绍

    目前在linux开发一个分析实时路况的应用程序,在联合测试中发现程序存在内存泄露的情况. 这下着急了,马上就要上线了,还好发现了一款Valgrind工具,完美的解决了内存泄露的问题. 推荐大家可以使用 ...

  9. 转载--提高C++性能的编程技术

    读书笔记:提高C++性能的编程技术   第1章 跟踪范例 1.1 关注点 本章引入的实际问题为:定义一个简单的Trace类,将当前函数名输出到日志文件中.Trace对象会带来一定的开销,因此在默认情况 ...

  10. 如何注册OCX控件

    32位系统: 将文件放到c:\windows\system目录 注册 运行:Regsvr32 c:\windows\system\xxx.ocx 取消注册运行:Regsvr32.exe /u c:\w ...