<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>

            .clock{
                width: 600px;
                height: 600px;
                background: url(images/clock.jpg) no-repeat;
                margin: 50px auto;
                position: relative;
            }
            .clock div{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .h{
                background: url(images/hour.png) no-repeat center center;
            }
            .m{
                background: url(images/minute.png)no-repeat center center;
            }
            .s{
                background: url(images/second.png)no-repeat center center;
            }
        </style>
        
        
    </head>
    <body>
        <div class="clock">
            <div class="h" id="hour"></div>
            <div class="m" id="minute"></div>
            <div class="s" id="second"></div>
        </div>
        
        <script>
            var hour = document.getElementById("hour");
            var minute = document.getElementById("minute");
            var second = document.getElementById("second");
            
            //开启定时器
            var s = 0;
            var m = 0, h = 0 , ms = 0;
            
            //开始定时器
            setInterval(function(){
                //写对应的时间和内容
            
            //得到最新的时间
            var date = new Date();
            
            //获取对应的时分
            ms = date.getMilliseconds(); //现在的毫秒数
            //拿到秒数
            s  = date.getSeconds() + ms / 1000;
            //拿到当前的分钟
            m  = date.getMinutes() + s / 60;
            //拿到小时
            h = date.getHours() % 12 + m / 60;
            
            //console.log(h);
            
            //计算旋转的角度
            //一圈 360 度  一共 有 60 秒  每秒 6° 现在几乎都是秒
            
            second.style.webkitTransform = "rotate("+ s*6 +"deg)";
            minute.style.webkitTransform = "rotate("+ m*6 +"deg)";
            hour.style.webkitTransform = "rotate("+ h*30 +"deg)";
            
            
            second.style.MozTransform = "rotate("+ s*6 +"deg)";
            minute.style.MozTransform = "rotate("+ m*6 +"deg)";
            hour.style.MozTransform = "rotate("+ h*30 +"deg)";

            //second.style.MozTransform
                      //   变化              旋转     deg 度
            
                
            },100);
        </script>
    </body>
</html>

JS时钟钟表的更多相关文章

  1. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  2. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

  3. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  4. [转载]FlipClock.js时钟,计数,3D翻转插件

    1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...

  5. FlipClock.js时钟,计数,3D翻转插件

    1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...

  6. 21个CSS3 / JS 时钟

    收集了21个酷炫的CSS / JS实现的时钟效果https://oktools.net/clocks 预览 :https://clocks.oktools.net/0/ 源码 :https://cod ...

  7. 纯js时钟特效详细代码分析实例教程

    电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一 ...

  8. js实现钟表

    在网页上显示一个钟表 html: <body onload="startTime()"> <div id="txt"></div& ...

  9. 一个简单的js时钟

    演示地址 代码 <html> <head> <title> Nonove js clock 时钟 </title> <script type=&q ...

随机推荐

  1. win8.1磁盘使用率100解决方法

    关闭家庭组,因为这功能会导致硬盘和CPU处于高负荷状态.关闭方法:Win+C – 设置 – 更改电脑设置 – 家庭组 – 离开如果用不到家庭组可以直接把家庭组服务也给关闭了:控制面板 – 管理工具 – ...

  2. struts.xml文件示范

    <?xml version="1.0" encoding="GBK"?> <!--下面指定Struts2配置文件的DTD信息--> &l ...

  3. word2007在试图打开文件时遇到错误解决方法

    当您尝试在 Microsoft Office Word 2007 中打开 .docx 文件时,该文件打不开.此外,您还会收到以下错误消息: Word 在试图打开文件时遇到错误.请尝试下列方法:* 检查 ...

  4. 简单学C——第三天

    控制结构(二)     前面我们已经了解到了,控制结构中的判断结构,当然switch语句也是判断语句.不过如果if...else...语句你会了,我相信switch语句你也一定会的,它们的功能都是差不 ...

  5. 《深入剖析Tomcat》阅读(一)

    第一章 一个简单的Web服务器 该应用程序仅接受位于指定目录的静态资源的请求,如HTML文件和图像文件.它也可以将传入的HTTP请求字节流显示到控制台上.但是,它并不发送任何头信息到浏览器,如日期或者 ...

  6. 大话设计模式之策略模式(strategy)

    策略模式:它定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响使用算法的用户. 针对商城收银模式,打折,返现促销等的例子: 打折还是促销其实都是一些算法,可以用工厂模式来 ...

  7. 静态代理VS动态代理

    代理Proxy: Proxy代理模式是一种结构型设计模式,主要解决的问题是:在直接访问对象时带来的问题 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为委 ...

  8. bzoj 1257: [CQOI2007]余数之和sum 数学 && 枚举

    1257: [CQOI2007]余数之和sum Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 1779  Solved: 823[Submit][Sta ...

  9. 微软HoloLens技术解谜

    HoloLens 是什么? HoloLens 是微软发布的可穿戴式增强现实计算设备,它拥有这么几个关键要素: 它是增强现实产品,即 Augmented Reality(AR),AR 技术将计算机生成的 ...

  10. PHP 7 探针的安装与测试

    首先,这是一篇软文,没错!就是一篇软文.因为我知道「PHP 是世界上最好的语言」,所以我相信很多人愿意读这篇用户帮忙写的软文,因为这篇软文应该能帮助 PHP 开发的同学一点小忙.我们是一家成立了7年的 ...