（效果图）

分两步进行的。

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

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

比如现在是 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. poj 1080 ——Human Gene Functions——————【最长公共子序列变型题】

    Human Gene Functions Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17805   Accepted:  ...

  2. SpringBoot | 第三十二章：事件的发布和监听

    前言 今天去官网查看spring boot资料时,在特性中看见了系统的事件及监听章节.想想,spring的事件应该是在3.x版本就发布的功能了,并越来越完善,其为bean和bean之间的消息通信提供了 ...

  3. Guid和Oracle中16进制字符的转换

    我们知道在Oracle中存的guid是16进制字符串,而在我们的C#代码中存的是guid对象,这样我会就要进行转换, 下面给出了两者进行转换的方法: public class Guid2RawProc ...

  4. 【Openvpn】iOS OpenVPN客户端设置指南（适用iPhone/iPad）

    适用于iPhone/iPad/这些iOS设备.之前iOS使用OpenVPN是需要越狱的,并且是付费第三方应用. 去年开始OpenVPN官方推出了iOS客户端就好用多了,免费也无需越狱. 说明:如果是新 ...

  5. JavaScript 监听回车事件

    JS监听某个输入框 //回车事件绑定 $('#search_input').bind('keyup', function(event) { if (event.keyCode == "13& ...

  6. Oracle新手常遇到的问题

    1.问题描述:尝试加载 Oracle 客户端库时引发 BadImageFormatException.如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题. 解决方 ...

  7. .NET Core 部署到CentOS–1.创建项目，简单部署

    开发环境:Windows 10,部署环境:阿里云 CentOS 7.3 1. 创建应用 1) 创建项目, 配置应用生成部署包 2) 配置项目 编辑project.json, 追加环境项, 选项可参考这 ...

  8. mvc 页面简单get获取后台数据

    后台方法 public ActionResult Linq() { var lt = UserSys.FindAll(); Hashtable ht = new Hashtable(); ht.Add ...

  9. Android - Rxjava 使用和原理

    用RxJava写的一个Android的小Demo 我所理解的RxJava——上手其实很简单 http://www.jianshu.com/p/5e93c9101dc5

  10. mysql五：pymysql模块

    一.介绍 之前都是通过MySQ自带的命令行客户端工具Mysql来操作数据库,那如何在Python程序中操作数据库呢?这就需要用到pymysql模块了. 这个模块本质就是一个套接字客户端软件,使用前需要 ...