<!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. Fragment详解之三——管理Fragment（1）

    相关文章: 1.<Fragment详解之一--概述>2.<Fragment详解之二--基本使用方法>3.<Fragment详解之三--管理Fragment(1)>4 ...

  2. text()、html() 以及 val()的区别

    text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子演示如何通过 text().htm ...

  3. Uva10635 LCS

    题目链接:http://vjudge.net/contest/137498#problem/G 题意:有两个长度为p+1和q+1的序列,每个序列的中的各个元素互不相同,且都是1~n^2之间的整.两个序 ...

  4. POJ 3415 后缀数组

    题目链接:http://poj.org/problem?id=3415 题意:给定2个串[A串和B串],求两个串公共子串长度大于等于k的个数. 思路:首先是两个字符串的问题.所以想用一个'#'把两个字 ...

  5. PDA手持移动POS销售开单软件（网络版）、PDA手持设备小票机

    背景描述: 一家大中型批发及门店销售企业,经销多种冻食品,业务范围覆盖周边众多区域和城市.成立以来,随着业务量的扩大,产品销售分两大渠道:多门店销售和仓库批发,各门店每天都有大量的零散客户和老客户进行 ...

  6. 安卓微POS-PDA手持终端，支持离线在线联网销售开单；移动开单 盘点 功能

    采购单.采购退货单  销售单.销售退货单.收款.优惠.赠品等操作实现盘点作业(多台设备同时作业,相同商品,数量累计) 现场打印票据 实现采购订单.采购单.采购退货单.销售订单.销售单.销售退货单验货没 ...

  7. 技术：使用Amazon S3接口云存储（Java版）

    http://blog.sina.com.cn/s/blog_6c7c14270102wait.html

  8. JavaScript 笔记 ( Prototype )

    这阵子实在好忙 ( 这样说好像也不是一两个月了... ),然后因为工作伙伴都是 JavaScript 神之等级的工程师,从中也学到不少知识,毕竟就是要和强者工作才会成长呀!为了想好好瞭解他们写的程式码 ...

  9. MySQL 挺有意思

    1, 修改密码 mysql -u root -p update user set Password = PASSWORD('NEWPWD') WHERE user = 'root'; FLUSH PR ...

  10. js 对象(Object)

    一.对象 除了字符串.数字.true.false.null和undefined之外,javascript中的值都是对象. javascript对象属性包括名字和值,属性名可以是包含空字符串在内的任意字 ...