（效果图）

分两步进行的。

第一步：  要得到现在的 时 分 秒

但是这里面有一个小玄机 。

比如现在是 9点整      时针指向 9 是没错的

但是如果现在是 9点半   时针应该指向的是 9到10 之间 才对

所以，我们不但要得到现在的小时 ，还要得到 已经过去了多少分

ms = date.getMilliseconds(); // 现在的毫秒数

s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s

m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟

h = date.getHours() % 12 + m / 60 ;

第二步：旋转角度原理

秒针     一圈  360 °     一共有 60 秒       每秒  6 °

分针     一圈  360    一圈走 60次   每次  6°  每分钟 6°

时针     一圈 360      一共 12 个 表盘没有24小时    每个小时 走   30°

完整代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .clock {

            width: 600px;

            height: 600px;

            margin:50px auto;

            background: url(images/clock.jpg) no-repeat;

            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>

</body>

</html>
<script>

  var hour = document.getElementById("hour");

  var minute = document.getElementById("minute");

  var second = document.getElementById("second");

    // 开始定时器

   var s = 0,m = 0, h = 0, ms = 0;

    setInterval(function() {

          // 内容就可以了

        var date = new Date();  // 得到最新的时间

        ms = date.getMilliseconds(); // 现在的毫秒数

        s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s

        m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟

        h = date.getHours() % 12 + m / 60 ;

        //console.log(h);

        //旋转角度

       // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒

        second.style.WebkitTransform = "rotate("+ s*6 +"deg)";

                     //  变化            旋转    deg  度

        minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";

        hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";

        second.style.MozTransform = "rotate("+ s*6 +"deg)";

                     //  变化            旋转    deg  度

        minute.style.MozTransform = "rotate("+ m*6 +"deg)";

        hour.style.MozTransform = "rotate("+ h*30 +"deg)";

    },100);

</script>

附上需要的图片

用JS实现一个时钟的效果的更多相关文章

  1. js 分享一个 时钟效果

    <style>        *{            margin: 0;            padding: 0;        }        #outLine{       ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. JS实现简单时钟效果

    老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...

  4. js实现一个砖头在页面拖拉效果

    用js实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果: 刚开始时: 鼠标点击拖动后: 实现代码: <html>   <head>       <meta ...

  5. 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  6. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  7. js+css3动态时钟-------Day66

    昨天,有一天招,宽带到底没装上.相当恼火,不过包了一天租新房,有很多想法下来,其中,率先实现了--动态时钟(它已上载的资源,一些粗略的全貌.汗...) 这里记录.这个看似简单的功能,以达到良好的,我在 ...

  8. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  9. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

随机推荐

  1. c#-FrameWork02泛型

    泛型 l  泛型(generic)编程是一种编程范式,它利用”参数化类型”将类型抽象化,从而可以实现更为灵活的复用.把数据类型参数化 sh泛型集合 泛型集合与集合的对比 泛型集合类 非泛型集合类 Li ...

  2. js获取客户端用户IP

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type=& ...

  3. C++里创建 Trie字典树（中文词典）（一）（插入、遍历）

    萌新做词典第一篇,做得不好,还请指正,谢谢大佬! 写了一个词典,用到了Trie字典树. 写这个词典的目的,一个是为了压缩一些数据,另一个是为了尝试搜索提示,就像在谷歌搜索的时候,打出某个关键字,会提示 ...

  4. 给HTML拍个照（如何将html元素转成图片）

    本文主要介绍一款好用的库,如何将HTML生成图片. 1.简述 最近在做的项目中,需要将界面转换成模板保存下来,本来想使用自适应布局完成,但是页面较复杂,模板较多,生成的模板使用过多的HTML标签,于是 ...

  5. Aligning Plots in a Column作图列对齐

    Plot[Sin[x], {x, 0, Pi}] Plot[10000 Sin[x], {x, 0, Pi}] 直接作图左边无法对齐,影响图的美观.可以使用左边界空格实现列对齐,代码如下: optio ...

  6. android launcher

    1.android_launcher的源码详细分析 2.android---launcher 3.Android 4.4 Launcher3桌面源码分析 4.通过深度剖析Android之Launche ...

  7. select * from pet where species regexp '^c';

    select * from pet where species regexp '^c';

  8. Catia 二次开发资料（转）

    Catia 二次开发 CATIA V5在开发之初就遵循面向对象的设计思想(OO),构建了完全基于组件的体系结构(PPR: Products,Process,Resource),有效地解决了维护.管理. ...

  9. 【Leetcode】【Medium】Single Number

    Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...

  10. 常见协议TCP、UDP、IP图

    ip tcp udp icmp help ip tcp http icmp