（效果图）

分两步进行的。

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

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

比如现在是 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. 18 Command Line Tools to Monitor Linux Performance

    By Ravi Saive Under: Linux Commands, Monitoring Tools On: December 26, 2013 http://www.tecmint.com/c ...

  2. 安恒杯11月月赛web题目-ezsql详细记录

    通过此题目可以学习到 1.通过load_file+like来盲注获取文件内容 2.php魔术方法__get函数的用法 3.bypass  linux命令过滤 题目中给了注册和登录的功能,没有源码泄露 ...

  3. ASP.NET 使用 AjaxPro 实现前端跟后台交互

    使用 AjaxPro 进行交互,很多人都写过文章了,为什么还要继续老生常谈呢.因为有一些细节上的东西我们需要注意,因为这些细节如果不注意的话,那么程序会报错,而且维护性较差. 引言 一.首先,还是那句 ...

  4. 关于两个 IQueryable 合并

    原先根据需求要对数据进行两种筛选,起初写过滤条件,但是过滤后发现有的数据重叠.因此改为查询两次. 因为查询后返回的是两个相同的.匿名的 IQueryable ,最终的目的是想两个 类型结合成一个. 参 ...

  5. Hashtable 键值对集合

    // Hashtable  键值对集合 一个键对应一个值 Hashtable ht=new Hashtable(); ht.Add(,"张三"); ht.Add(,'男'); ht ...

  6. 通过学生-课程关系表，熟悉hive语句

    通过学生-课程关系表,熟悉hive语句 1.在hive中创建以下三个表. create table  student(Sno int,Sname string,Sex string,Sage int, ...

  7. 轻松掌握java读写锁(ReentrantReadWriteLock)的实现原理

    转载:https://blog.csdn.net/yanyan19880509/article/details/52435135 前言 前面介绍了java中排它锁,共享锁的底层实现机制,本篇再进一步, ...

  8. IntelliJ IDEA 2017.3.5 安装 lombok-plugin-0.17 失败，通过网络下载总是超时

    1.问题: IntelliJ IDEA 2017.3.5 安装 lombok-plugin-0.17 失败,通过网络下载总是超时: 2.原因:IntelliJ IDEA 2017.3.5 目前还不支持 ...

  9. canvas玩转微信红包

    CSS3相关属性: <!DOCTYPE html> <html> <head lang='en'> <meta charset='UTF-8'/> &l ...

  10. Oracle 修改任何用户的密码

    1.通过sys用户以sysdba身份登陆: 2.修改用户密码:  alter user 用户名 identified by 密码; 比如修改system的密码为 manager : alter use ...