<!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. Android自动化压力测试之Monkey Test 异常解读（五）

    monkey结果分类 monkey结果详细解读 monkey运行log输出后,得读懂日志内容,定位错误 lgo日志顺序输出分别为  测试命令信息.随机事件流(11种事件).异常信息(anr.crash ...

  2. sqoop与mysql之间中文乱码

    sudo -u hive sqoop export --connect "jdbc:mysql://192.168.22.201/LauncherDB?useUnicode=true& ...

  3. 分享Kali Linux 2016.2第45周VMware虚拟机

    分享Kali Linux 2016.2第45周VMware虚拟机本虚拟机使用Kali Linux 2016.2第45周镜像安装而成.有兴趣的同学,可以下载使用.(1)该虚拟机支持VMware 9.10 ...

  4. [bzoj1071]组队[单调指针乱搞]

    这道题也很感人,主要改了比较久的时间... bzoj第一页的题,居然只过了五百多个人,(我是第512,orzliyicheng是513) 代码不长,但是细节搞了很久,主要sort写错了,晕... 首先 ...

  5. 请将 php.ini 中的 short_open_tag 设置为 On，否则无法继续安装。

    安装的wamp套件,访问http://localhost/Discuz/install/index.PHP进行安装操作,提示 对不起,请将 php.ini 中的 short_open_tag 设置为 ...

  6. Codeforces 650B Image Preview（尺取法）

    题目大概说手机有n张照片.通过左滑或者右滑循环切换照片,滑动需要花费a时间:看一张照片要1时间,而看过的可以马上跳过不用花时间,没看过的不能跳过:有些照片要横着看,要花b时间旋转方向.那么问T时间下最 ...

  7. 关于dialog置于底层的问题

    我今天开发的一个dialog,引用代码中已有的,发现是居中的 接下来,我要把它置为底部 然后,我的思路就是从dialog的view设置入手,还用了setgravity,最后还是不成功 所以,后来,我休 ...

  8. .net平台下C#socket通信（上）

    在开始介绍socket前先补充补充基础知识,在此基础上理解网络通信才会顺理成章,当然有基础的可以跳过去了.都是废话,进入正题. TCP/IP:Transmission Control Protocol ...

  9. Struts2上传大小限制

    Struts中报错 the request was rejected because its size (***) exceeds the configured maximum (2097152) 最 ...

  10. BZOJ3257 : 树的难题

    设$f[x][i][j]$表示以$x$为根的子树,与$x$连通部分有$i$个黑点,$j$个白点,不联通部分都是均衡的最小代价.若$i>1$,则视作$1$:若$j>2$,则视作$2$. 然后 ...