这个小案例主要是对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. 一个有趣的回答（摘自http://www.51testing.com/html/03/n-860703.html）

    假设这有一个各种字母组成的字符串,假设这还有另外一个字符串,而且这个字符串里的字母数相对少一些.从算法上讲,什么方法能最快的查出所有小字符串里的字母在大字符串里都有? 比如,如果是下面两个字符串: S ...

  2. c++中变量声明和变量定义的区别。2016年12月6日

    整个流程: 1.程序告诉cpu,程序将要使用一个变量.(暂时不一定用到,先说一下.) 2.程序告诉CPU,程序现在就要使用一个变量.(现在就用) 3.cpu按照这个变量的类型,把内存划分出几个单位(b ...

  3. C++多线程2

    #include "stdafx.h" #include <windows.h> int g_count; ; DWORD __stdcall Func(LPVOID ...

  4. swift 定位

    iOS 8 及以上需要在info.plist文件中添加下面两个属性 NSLocationWhenInUseUsageDescription 使用应用期间 NSLocationAlwaysUsageDe ...

  5. AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

    在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义. 先说Buttons,它是一组按钮,用来实现form表单中的 ...

  6. Devexpress DateEdit控件的值不反馈到数据源的处理方式。

    如果在GridControl中要把编辑的值反馈到数据源,可以用Gridview1.PostEdit()方法. 可是在datalayout中使用就会遇到一些问题:比如说DateEdit控件,在保存数据的 ...

  7. ubuntu 搭建maven库 2.14.2-01并配置离线索引文件

    前提 安装JDK版本1.8或者以上 1 下载 http://www.sonatype.org/nexus/archived/  选择相应的版本 2 复制到/usr/local 下解压 sudo cp ...

  8. 有关javascript的性能优化（合理的管理内存）

    使用具备垃圾收集机制的语言编写程序,开发人员一般不必操心内存管理的问题.但是,Javascript在进行内存管理及收集时面临的问题是有点与众不同.其中最主要的一个问题是分配给Web浏览器的可用内存数量 ...

  9. iOS架构师之路：慎用继承

    最近在看大神Casa的文章<跳出面向对象思想(一) 继承>,脑洞大开.文章给我们展示了一个随着产品需求不断变化的例子,该例子中通过继承实现不同页面的搜索视图和搜索逻辑的代码复用,随着产品需 ...

  10. linux rlwrap

    无意中发现了rlwrap,终于可以在linux下使用方向键上下翻页输入过的语句了. 比如sqlplus or ggsci中使用. 如果是ubuntu,则在software center中可以直接安装r ...