核心:

　　1,document.styleSheets 修改css里的keyframes属性值

　　2,表针角度的计算

最终显示效果:

<!DOCTYPE html>

<html>

 <head>

  <title>实现表盘样式的时间显示</title>

  <meta charset="utf-8"/>

    <style>

    div[id^="a"]{position:absolute;

        font-size:.1em; text-align:center;

        width:7px; height:5px;

        top:0; left: 46.5px;

        transform-origin:50% 50px;

    }

    #a1{transform:rotate(30deg)}

    #a2{transform:rotate(60deg)}

    #a3{transform:rotate(90deg)}

    #a4{transform:rotate(120deg)}

    #a5{transform:rotate(150deg)}

    #a6{transform:rotate(180deg)}

    #a7{transform:rotate(210deg)}

    #a8{transform:rotate(240deg)}

    #a9{transform:rotate(270deg)}

    #a10{transform:rotate(300deg)}

    #a11{transform:rotate(330deg)}

    </style>

  <style>

    #clock{width:100px; height:100px;

    border-radius:50%;

    border:4px solid black;

    position:relative;

}

#s{width:2px; height:55px;

    position:absolute; top:5px; left:49px;

    background-color:red;

    transform-origin:50% 45px;

    -webkit-animation:rotateS 60s linear infinite;

}

#m{width:4px; height:50px;

    position:absolute; top:10px; left:48px;

    background-color:black;

    transform-origin:50% 40px;

    -webkit-animation:rotateM 3600s linear infinite;

}

#h{width:6px; height:45px;

    position:absolute; top:15px; left:47px;

    background-color:black;

    transform-origin:50% 35px;

    -webkit-animation:rotateH 43200s linear infinite;

}

@-webkit-keyframes rotateS{

    0%{transform:rotate(0deg)}

    100%{transform:rotate(360deg)}

}

@-webkit-keyframes rotateM{

    0%{transform:rotate(0deg)}

    100%{transform:rotate(360deg)}

}

@-webkit-keyframes rotateH{

    0%{transform:rotate(0deg)}

    100%{transform:rotate(360deg)}

}

  </style>

 </head>

 <body>

  <div id="clock">

    <div id="h"></div>

    <div id="m"></div>

    <div id="s"></div>

    <div id="a1">I</div>

    <div id="a2">II</div>

    <div id="a3">III</div>

    <div id="a4">IIII</div>

    <div id="a5">V</div>

    <div id="a6">VI</div>

    <div id="a7">VII</div>

    <div id="a8">VIII</div>

    <div id="a9">IX</div>

    <div id="a10">X</div>

    <div id="a11">XI</div>

    <div id="a12">XII</div>

  </div>

  <script>

    window.onload=function(){

        //获得当前页面第二个样式表文件

        var sheet=document.styleSheets[1];

        //获得sheet中三个keyframes

        var Skeyframes=sheet.cssRules[4];

        var Mkeyframes=sheet.cssRules[5];

        var Hkeyframes=sheet.cssRules[6];

        //获得三个keyframes下的内嵌rule

        var SStartRule=Skeyframes.cssRules[0];

        var SEndRule=Skeyframes.cssRules[1];

        var MStartRule=Mkeyframes.cssRules[0];

        var MEndRule=Mkeyframes.cssRules[1];

        var HStartRule=Hkeyframes.cssRules[0];

        var HEndRule=Hkeyframes.cssRules[1];

        //计算当前时间对应的三个指针的角度

        var now=new Date();

        var h=now.getHours();

        var m=now.getMinutes();

        var s=now.getSeconds();

        var hDeg=(h*3600+m*60+s)/(3600*12)*360;

        var mDeg=(m*60+s)/3600*360;

        var sDeg=360*s/60;

        //设置三个指针起始角度分别为sDeg,mDeg,hDeg

        SStartRule.style.transform=

            "rotate("+sDeg+"deg)";

        MStartRule.style.transform=

            "rotate("+mDeg+"deg)";

        HStartRule.style.transform=

            "rotate("+hDeg+"deg)";

        //设置三个指针的结束较为分别为其起始角度+360度

        SEndRule.style.transform=

            "rotate("+(sDeg+360)+"deg)";

        MEndRule.style.transform=

            "rotate("+(mDeg+360)+"deg)";

        HEndRule.style.transform=

            "rotate("+(hDeg+360)+"deg)";

    }

    </script>

 </body>

</html>

js实现显示系统时间的表盘的更多相关文章

  1. js实时显示系统时间

    刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>functio ...

  2. 时间操作（JavaScript版）—年月日三级联动（默认显示系统时间）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317         这个功能 ...

  3. Qt 实时显示系统时间

    前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...

  4. 使用js实现显示系统当前时间并实现倒计时功能并触发模态框（遮罩）功能

    常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...

  5. 小程序，用js获取当前系统时间并显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. html代码中显示系统时间

    可以显示系统的静态时间和动态时间 1,静态时间 <script type="text/javascript"> var myDate = new Date(); doc ...

  7. Android学习总结——实时显示系统时间

    我们都知道System.currentTimeMillis()可以获取系统当前的时间,这里要实时显示就可以开启一个线程,然后通过handler发消息,来实时的更新TextView上显示的系统时间.具体 ...

  8. linux显示系统时间

    date   查看系统时间 设置系统时间 # date --set “09/17/10 11:50" (月/日/年时:分:秒) # clock –systohc  将系统时间写入硬件时间

  9. 用JS实现实时显示系统时间

    废话我就不多说了,直接上图和代码了 效果图: 代码视图: 下面为大家附上代码,复制即可用: <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. (转)HttpWebRequest以UTF-8编码写入内容时发生“Bytes to be written to the stream exceed the Content-Length bytes size specified.”错误

    from:http://www.cnblogs.com/Gildor/archive/2010/12/13/1904060.html HttpWebRequest以UTF-8编码写入内容时发生“Byt ...

  2. CNN学习笔记：全连接层

    CNN学习笔记:全连接层 全连接层 全连接层在整个网络卷积神经网络中起到“分类器”的作用.如果说卷积层.池化层和激活函数等操作是将原始数据映射到隐层特征空间的话,全连接层则起到将学到的特征表示映射到样 ...

  3. 【工具】PC端调试手机端 Html 页面的工具

    一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...

  4. 菩提树下的杨过.Net 的《hadoop 2.6全分布安装》补充版

    对菩提树下的杨过.Net的这篇博客<hadoop 2.6全分布安装>,我真是佩服的五体投地,我第一次见过教程能写的这么言简意赅,但是又能比较准确表述每一步做法的,这篇博客主要就是在他的基础 ...

  5. Java：判断字符串是否为数字的五种方法

    Java:判断字符串是否为数字的五种方法 //方法一:用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = str. ...

  6. H5新特性---新应用

    1.持久化本地存储 可以不通过第三方插件实现数据的本地存储 2.WebSocket 页面之间可以双向通信 3.服务器推送事件(SSE) 从Web服务器将消息推送给浏览器(在手机中常见) 例如: < ...

  7. wait() 与 notify/notifyAll()

    wait() 与 notify/notifyAll() 是Object类的方法 1. wait() 与notify/notifyAll方法必须在同步代码块中使用 在执行以上方法时,要先获得锁.那么怎么 ...

  8. Please make sure the TESSDATA_PREFIX environment variable is set to your "tessdata" directory.

    tesseract的一个操作问题,简单记录 类似坑尽量少踩 运行 .\tesseract.exe .\1356445914_9857.jpg tstimg  报错如下:Please make sure ...

  9. cisco笔记

    交换机 show cdp neighbors 显示邻居信息 路由 show ip interface brief 显示接口ip

  10. 20145229吴姗珊逆向BOF实践

    20145229吴姗珊逆向BOF实践 实践 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. ...