<!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. svn代码提交注意事项

    先全部add,查看是否有gen和bin,然后再忽略这两个,忽略时选择最后rescury....

  2. PS切图的几种方式

    方法一 点击图层右键-->导出为 导出需要的格式与大小 方法二 选择多个图层右键--->快速导出为PNG(导出的名字就是图层名字) 方法三

  3. C#的Enum——枚举

    枚举 枚举类型声明为一组相关的符号常数定义了一个类型名称.枚举用于“多项选择”场合,就是程序运行时从编译时已经设定的固定数目的“选择”中做出决定. 枚举类型(也称为枚举)为定义一组可以赋给变量的命名整 ...

  4. 上传文件大于 2G以上

    1. 开始->运行中输入以下路径, 回车. %windir%\system32\inetsrv\config\applicationhost.config 2. 在打开的配置文件中搜索" ...

  5. 用脚本完成mysql工作

    1. 用mysql -e在脚本中执行mysql的sql语句 #!/bin/bash #simple mysql shell usage logtime=`date "+%Y-%m-%d&qu ...

  6. android6.0 适配的问题——activity销毁的问题

    1.最近我去运行我们公司所开发的APP,发现出现很多问题,就是从前一个页面跳到另外一个页面后,前一个页面会被销毁. 正常来说,activity跳转过程是这样: A: 存在intent +setActi ...

  7. 数据结构：后缀自动机 WJMZBMR讲稿的整理和注释

    链接放在这里,有点难理解,至少我个人是的. 后缀自动机是一种有限状态自动机,其功能是识别字符串是否是母串的后缀.它能解决的问题当然不仅仅是判断是不是后缀这种事,跟字符串的连续子串有关的问题都可以往这个 ...

  8. RequireJS 循环依赖报 模块undefined 处理方案

    RequireJS 循环依赖 开始学习使用RequireJS之后做了几个小例子,之后想着把手头的项目也用RequireJS写一遍试试.感觉胜利就在前方了,忽然发现始终卡在一个问题上: 很常见的一个问题 ...

  9. ACM: CodeForces 140A New Year Table-数学几何

    CodeForces 140A New Year Table Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d ...

  10. 如何伪装成为一名前端（JS方向）

    作为一个菜鸟级别的.NET开发者,在连服务器都没搞定的情况下,要研究前端,这是在扯淡,不过,迫于工作的需要,时常需要去前端打杂,所以经常伪装成为一名前端,有时候竟产生错觉,去应聘Y一份前端work吧. ...