<!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. SQL Case when 的使用方法（转）

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

  2. HDU 4858 项目管理 分块

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4858 题解: 下面说一个插入查询时间复杂度为sqrt(m)的算法: 对每个点定义两个值:val,su ...

  3. theano报一种float类型错误的处理办法

    我实际用的环境是Keras,查错误时查到是Theano的配置问题,所以在标题里就写成Theano的问题了, 是这样的,从Github上下载的别人的代码,准备复现别人的实验,结果在机器上部署好环境之后跑 ...

  4. 浩瀚科技PDA移动开单|盘点机 数据采集器 条码扫描开单微POS软件 现场打印开单

    PDA移动开单,是我公司的一款便携式开单配套产品,PDA能通过蓝牙.无线局域网.互联网直接与主机连接,让公司业务人员能随时随地了解公司产品信息并且进行开单.入库.库存.盘点等一系列进销存操作.是现今企 ...

  5. .Net Mvc3框架调用服务端控件解决方案

      /*BY:Wangyexin date:2011年4月30日 20:17:38*/ /*说明:.net mvc3框架,View层调用服务端控件,输出到.cshtml文件中显示*/ 1.先说说.ne ...

  6. js小例子（标签页）

    运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...

  7. mybatis做like模糊查询

    http://www.cnblogs.com/cyttina/p/3894428.html

  8. 优先队列 UVA 11997 K Smallest Sums

    题目传送门 题意:训练指南P189 分析:完全参考书上的思路,k^k的表弄成有序表: 表1:A1 + B1 <= A1 + B2 <= .... A1 + Bk 表2:A2 + B1 &l ...

  9. 快速傅里叶变换FFT学习小记

    FFT学得还是有点模糊,原理那些基本还是算有所理解了吧,不过自己推这个推不动. 看的资料主要有这两个: http://blog.miskcoo.com/2015/04/polynomial-multi ...

  10. MongoDB 入门之基础 DDL

    此文章主要记录部分主要的 MongoDB 的 DDL 操作. db  查看当前所在的数据库(默认 test) > db test > show dbs  查看当前数据库服务器上的数据库名字 ...