<!DOCTYPE html>

 <html>

  <head>

   <title>Js版带表盘的时钟</title>

   <meta charset="utf-8"/>

   <link rel="Stylesheet" href="4_2.css"/>

   <script src="4_2.js"></script>

  </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>

  </body>

 </html>
 #clock{width:100px; height:100px;

     border-radius:50%;

     border:2px solid black;

     position:relative;

 }

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

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

     background-color:red;

     transform-origin:50% 45px;

 }

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

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

     background-color:black;

     transform-origin:50% 40px;

 }

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

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

     background-color:black;

     transform-origin:50% 35px;

 }

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

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

     width:7px; height:5px;

     top:; left: 46.5px;

     transform-origin:50% 50px;

 }

 #a4,#a8{font-size:.4em; font-weight:bold}

 #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)}

js代码：

 var clock={

     divH:null,

     divM:null,

     divS:null,

     start:function(){

         var self=this;

         self.divH=document.getElementById("h");

         self.divM=document.getElementById("m");

         self.divS=document.getElementById("s");

         self.calc();

         setInterval(function(){self.calc();},1000);//this.calc.bind(this);

     },

     calc:function(){

         var now=new Date();

         var h=now.getHours();

         h>12&&(h-=12);

         var m=now.getMinutes();

         var s=now.getSeconds();

         var sdeg=s*6;

         var mdeg=m*((360-s/60)/60);

         var hdeg=h*((360-mdeg/60)/12);

         this.divH.style.transform="rotate("+hdeg+"deg)";

         this.divM.style.transform="rotate("+mdeg+"deg)";

         this.divS.style.transform="rotate("+sdeg+"deg)";

     }

 }

 window.onload=function(){

     clock.start();

 }

效果展示！

js实现时钟的更多相关文章

  1. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  2. JS实现时钟特效

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  3. JS 做时钟

    今天,给大家分享一个用JS做的时钟. <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  4. 纯html、css3、js的时钟

    之前在网上看了一些使用js写的时钟,但感觉实现的方法有点麻烦,所以就自己重新写了一个例子,样子有点丑,但方法比较简单,大家就凑合看吧 其中采用的主要方法是原生js里面的Data(时期)对象,以及它的. ...

  5. js获取当前时间&js 页面时钟

    js获取当前时间 //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = ...

  6. JS + HTml 时钟代码实现

    JS+ Html 画布实现的时钟效果图: 闲来无聊做了一个网页的时钟,效果模拟传统时钟的运行方式, 运用了html 的画布实现指针,背景图片引用了网络图片. 具体原理: 首先将时钟分为四个不同区域,对 ...

  7. js人形时钟

    https://blog.csdn.net/rsylqc/article/details/44808063 分享自:http://chabudai.org/blog/?p=59 在这个网站看到一个很有 ...

  8. js中时钟表盘

    1.js时钟表盘 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. JS实现时钟效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. JavaScrip入门（3）

    函数: var m2=function(){ console.log('2222'); } console.log(typeof(m2)); 输出结果:test.html:31 function js ...

  2. 2016.9.1 JavaScript入门之五

    1.数据类型:对象:也可以被认为是一个键/值存储,像一个字典.可以取代switch{case:case:}或者if else 例如: function phoneticLookup(val) { va ...

  3. MATLAB plot函数的一些参数

    直接从帮助文档中抓图,注意是颜色.线型什么的.

  4. 遍历table指定name的td

    $("td[name='rates']").each(function () { var temp = $(this).text().substr(0,$(this).text() ...

  5. Amazon S3云存储服务器的功能及编程接口

    http://blog.csdn.net/iamshaofa/article/details/7877785/

  6. sql 、linq、lambda 总结

    LINQ的书写格式如下: from 临时变量 in 集合对象或数据库对象 where 条件表达式 [order by条件] select 临时变量中被查询的值 [group by 条件] Lambda ...

  7. Spring MVC Rest 支持CORS

    新建cors filter文件, package cn.ac.iscas.pebble.ufe.tools; import java.io.IOException; import javax.serv ...

  8. 隐式调用 Intent 大全, 很全

    http://ming-fanglin.iteye.com/blog/1061312 //调用浏览器 Uri uri = Uri.parse(""); Intent it  = n ...

  9. [WP8.1UI控件编程]Windows Phone理解和运用ItemTemplate、ContentTemplate和DataTemplate

    2.2.5 ItemTemplate.ContentTemplate和DataTemplate 在理解ItemTemplate.ContentTemplate和DataTemplate的关系的之前,我 ...

  10. MathType的公式在word中跟文字不对齐

    引用http://blog.sina.com.cn/s/blog_4d1f40c00100net8.html 部分Mathtype公式与文档文字没有很好的对齐,而是浮起来了,也就是说Mathtype公 ...