这个小案例主要是对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. Android中的DrawerLayout

    简介 Drawerlayout是google自带的控件,功能类似开源的SlidingMenu,在support-v4包下用来替代SlidingMenu(google好无耻啊). 使用方法 在activ ...

  2. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. OC内存管理

    内存问题 野指针异常:访问所有权的内存,如果想要安全访问,必须确保空间还在(确保访问的内存不是僵尸对象) 内存泄露:空间使用完之后没有及时释放 过度释放:对一块空间释放多次,立刻crash 内存溢出: ...

  4. bigdecimal 保留小数位

    public class test1_format { public static void main(String[] args) { BigDecimal decimal = new BigDec ...

  5. @property? @property？说说他身后的事情。

    @property 后面可以有哪些修饰符? 1.线程安全的       aaomic.nonatomic 2.访问权限的       readonly.readwrite 3.内存管理(ARC) as ...

  6. 2016 - 2 - 20 ARC知识总结（二 autorelease概念及实现）

    首先祝自己生日快乐~23咯~ 一  autorelease的概念 autorelease会像C语言的自动变量那样来对待对象实例.当超出作用域(相当于变量作用域)时,对象的实例release实力方法被调 ...

  7. Ngui中Sprite，SlicedSprite，Tiled Sprite，FilledSprite的区别

    Sprite:标准Sprite控件,自适应图片大小. Sliced Sprite:一个含有9个切片的Sprite,创建固定边框的控件最佳选择,固定大小,不会随图片大小而改变,可做人物头像等. Tile ...

  8. Linux文件系统层次结构标准

    该标准的目的是定义Linux文件系统的标准路径,使得开发者和用户可以在合理的位置找到需要的东西. Linux的文件布局的大体想法是将文件和目录分为如下3组: 对运行Linux的某一特定系统唯一的文件和 ...

  9. ZOJ2604-DP

    递推式并不知自己推出来的,用来纪念一下学会了java的函数用法... 最后5分钟的时候,大姐头直接告诉我打表,但是我当场就蒙了,我怎么会用java打表(其实自己脑中想的就是要输出到文件中然后生成数组打 ...

  10. iOS工作小技巧及填坑记录

    以下是本人在iOS开发工作中使用的一些小技巧,记录一下. 1.使用XXX.pch文件便捷开发+加速Build 在IOS开发的项目中有一个XX_Prefix.pch XX_Prefix.pch:扩展名. ...