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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .clock {
  8.             width: 600px;
  9.             height: 600px;
  10.             margin: 100px auto;
  11.             background: url(images/clock.jpg) no-repeat;
  12.             position: relative;
  13.         }
  14.  
  15.         .clock div {
  16.             position: absolute;
  17.             top: 0;
  18.             left: 0;
  19.             width: 100%;
  20.             height: 100%;
  21.             background: url(images/hour.png) no-repeat center center;
  22.         }
  23.  
  24.         #m {
  25.             background-image: url(images/minute.png);
  26.         }
  27.  
  28.         #s {
  29.             background-image: url(images/second.png);
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <div class="clock">
  35.     <div id="h"></div>
  36.     <div id="m"></div>
  37.     <div id="s"></div>
  38. </div>
  39.  
  40. <script>
  41.     var h = document.getElementById("h");
  42.     var m = document.getElementById("m");
  43.     var s = document.getElementById("s");
  44.  
  45.     function setTime(){
  46.         //获取当前时间
  47.         var date = new Date();
  48.  
  49.         var second = date.getSeconds()+date.getMilliseconds()/1000;
  50.         s.style.transform = "rotate("+6*second+"deg)";
  51.  
  52.         var minute = date.getMinutes()+second/60;
  53.         m.style.transform = "rotate("+6*minute+"deg)";
  54.  
  55.         var hour = date.getHours() + minute/60;
  56.         h.style.transform = "rotate("+30*hour+"deg)";
  57.  
  58.     }
  59.  
  60.     setTime();
  61.  
  62.     setInterval(setTime, 15);
  63. </script>
  64. </body>
  65. </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. 《JavaScript高级程序设计》读书笔记--（4）对象的创建

    ECMAScript支持面向对象(OO)编程,但不使用类或者接口.对象可以在代码执行过程中创建或增强,因此具有动态性而非严格定义的实体.在没有类的情况下,可以采用下列模式创建对象. 对象的创建 工厂模 ...

  2. ROS笔记——创建简单的主题发布节点和主题订阅节点

    在安装好ROS后,接着学习如何创建节点和节点之间的通信方式,以一个简单的主题发布节点和主题订阅节点说明. 节点是连接ROS网络等可执行文件,是实现某些功能的软件包,也是一个主要计算执行的进程. 一.创 ...

  3. mac 端口被占用及kill端口

    在本地部署 Web 应用时我有遇到过某网络端口已经被其他程序占用的情况,这时候就需要先退出占用该端口的进程,我们可以通过“终端”来实现结束占用某特定端口的进程 1.打开终端,使用如下命令: lsof ...

  4. word表格自动编号，前面加章节号

    1.需求 最近要用Word写一些有很多公式的文档,一个小节就有十几个公式,一章有几十个公式.我希望能公式能自动编号.例如我在公式(3.3)前面增加了一个公式并编号后,后面的编号以及引用编号的地方会自动 ...

  5. C语言中内存对齐

    今天一考研同学问我一个问题,一个结构体有一个int类型成员和一个char类型成员,问我这个结构体类型占多少个字节,我直接编个程序给他看结果.这个结构体占八个字节,咦,当时我蛮纳闷的,一个int类型四个 ...

  6. js实现当前导航菜单高亮显示

    为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...

  7. LCD底层驱动分析

    根据分析的框架,自己写一个LCD驱动程序 1分析LCD硬件原理图 Von和Voff接的是一个电源电路,通过LCD_POWER接的是GPG4来控制LCD电源,高电平表示开启LCD电源 VM接的是CPU的 ...

  8. 使用Myeclipse插件将wsdl生成java客户端代码

    使用环境:MyEclipse9.0 本教程使用Myeclipse内置插件生成java代码,网上说这是xfire插件,不管怎样,生成和调用客户端代码都十分简单. 1.在项目上右键,选择New->O ...

  9. ThinkPHP学习遇到的点问题（学习中，持续更新）

    1.__ROOT__变量没有值的问题 今天遇到这个比较变态的问题,可能是我技术比较菜吧,搞了一个多小时,最后发现问题可能出现在 入口文件中定义的APP_NAME的名字和项目的跟目录名称相同了,比如我网 ...

  10. linux 录制并回放终端会话

    发现一个比较好玩的命令,然后这块做一下记录 以下内容复制来源于 LINUX shell 脚本攻略第二版 当你需要为别人在终端上演示某些操作或是需要准备一个命令行教程时,通常得一边手动输入命令一边演示, ...