（效果图）

分两步进行的。

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

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

比如现在是 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. URAL —— 1255 & HDU 5100——Chessboard ——————【数学规律】

    用 k × 1 的矩形覆盖 n × n 的正方形棋盘 用 k × 1 的小矩形覆盖一个 n × n 的正方形棋盘,往往不能实现完全覆盖(比如,有时候 n × n 甚至根本就不是 k 的整倍数). 解题 ...

  2. java中json解析，xml解析

    抓取网页内容,会返回json或者xml(html)格式的数据. 为了方便的对上述两种格式的数据进行解析,可采用解析工具. JsonPath https://github.com/jayway/Json ...

  3. Mysql数据库死锁分析相关概念

    参考博客: mysql死锁问题分析(https://www.cnblogs.com/LBSer/p/5183300.html) mysql insert锁机制(http://yeshaoting.cn ...

  4. vue打包（npm run build）时错误记录

    vue项目打包时,报错如下: 问题分析:semver.js报错,版本不正确,解决办法,打包时忽略版本检查 解决办法:

  5. js简单实现表格排序

    昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...

  6. 关于window的端口查看及tomcat的端口修改问题

    1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\>netstat -ano 协议    本地地址                     外部地址  ...

  7. Oracle 查看表占用的空间大小

    select TABLE_NAME , num_rows * avg_row_len /1024/1024 AS KJfrom ALL_tables WHERE TABLE_NAME IN (sele ...

  8. Jmeter(一)http接口添加header和cookie --转载

    Jmeter(一)http接口添加header和cookie   HTTP信息头管理器在Jmeter的使用过程中起着很重要的作用,通常我们在通过Jmeter向服务器发送http请求(get或者post ...

  9. Tomcat中部署web应用的三种方式

    Tomcat中部署web应用的三种方式(静态部署)       第一种,针对war或解压后的war,最为常用的是直接操作webapp目录,将完整的war包或者web应用直接放到webapp目录下.使用 ...

  10. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...