（效果图）

分两步进行的。

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

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

比如现在是 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. 前台通过ajax获取后台数据，PHP如何返回中文数据

    现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...

  2. window 常用MySQL数据库命令总结

    登录:cmd - mysql -uroot -p 创建数据库:CREATE DATABASE `tpcms` DEFAULT CHARACTER SET utf8 COLLATE utf8_gener ...

  3. Android4.4 在Framework新增内部资源编译不过的问题

    如果在Frameworks新增内部资源,并在Java代码中使用类似形式来引用资源:com.android.internal.R.layout.xxx,需要在frameworks/base/core/r ...

  4. Python爬虫实战：将网页转换为pdf电子书

    写爬虫似乎没有比用 Python 更合适了,Python 社区提供的爬虫工具多得让你眼花缭乱,各种拿来就可以直接用的 library 分分钟就可以写出一个爬虫出来,今天就琢磨着写一个爬虫,将廖雪峰的 ...

  5. PHP Primary script unknown 终极解决方法

    相信很多配置php环境的都遇到过这个恼人的问题: 浏览器访问php文件,返回来 File not found 查看/var/log/nginx/error.log ,有 “Primary script ...

  6. Regular Expression 正则表达式

    1. "^"表示以什么字符开始,"$"表示以什么字符结束: 2. \w表示字符类,包括大小写字母和数字: 3. “+”表示一个或多个,"*" ...

  7. jquery简介（一）

    摘要:简要介绍jquery的起源,以及为什么需要使用jquery. jquery的优点 jquery体量小,加载速度快,其本身具有的功能使JavaScript应用程序开发人员的工作变得分外轻松.其中最 ...

  8. March 31 2017 Week 13 Friday

    Sometimes, you think the sky is falling down, actually, that is just because you stand slanting. 有时候 ...

  9. python入门18 继承和多态

    继承:子类继承父类的属性和方法  class 子类名(父类1,父类2) 多态:子类重写父类的方法 判断对象是否是某个类的实例:  isinstance(object,class) 父类-汽车类 #co ...

  10. 小故事学设计模式之Command : (一) 在永和豆浆店

    IT的事就是过场多,过场多了就容易忘,所以我们不妨看一个记一个,这也是一个办法,顺便跟同行们学习交流一下)前几天出去拍照,饿到腿软, 回城附近有一家永和豆浆店, 我们决定去那边解决午餐.豆浆店里面还不 ...