（转自：http://www.cnblogs.com/Wenwang/archive/2011/09/21/2184102.html）

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
#clock{
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
position:relative;
margin:0 auto;
background-color:#eee;
}
#dot{
border-radius:2px;
width: 8px;
height: 8px;
position:absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
background: black;
}
.needle
{
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin:50% 100%;
}
#second{
position:relative;
z-index:5;
height: 80px;
width: 1px;
margin: 20px auto;
}
#second_needle{
height: 100%;
width: 100%;
position: relative;
background: green;
}
#minute{
z-index:4;
height: 60px;
width: 4px;
position: absolute;
top: 40px;
left: 0px;
right: 0px;
margin: auto;
}
#minute_needle{
height: 100%;
width: 100%;
background: blue;
}
#hour{
z-index:3;
height: 40px;
width: 8px;
position: absolute;
top: 60px;
left: 0px;
right: 0px;
margin: auto;
}
#hour_needle{
height: 100%;
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="clock">
<div id="dot"></div>
<div id="second" class="needle">
<div id="second_needle">
</div>
</div>
<div id="minute" class="needle">
<div id="minute_needle">
</div>
</div>
<div id="hour" class="needle">
<div id="hour_needle">
</div>
</div>
</div>
<script type="text/javascript">
//初始化各指钟的位置
window.onload = function(){
var date = new Date(),
second = date.getSeconds(),
minute = date.getMinutes(),
minuteDeg,
hour = date.getHours(),
hourDeg;
var secondrotate = 'rotate('+second*6+'deg)';
var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate;
//对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义?
document.getElementById('second').style.cssText = scss;
document.getElementById('second').style.webkitTransform = secondrotate;

minuteDeg = minute*6 + second*6/60;
var minuterotate = 'rotate('+minuteDeg+'deg)';
var minutecss = '-moz-transform:' + minuterotate + ';-o-transform:' + minuterotate + ';-ms-transform:' + minuterotate ;
document.getElementById('minute').style.cssText = minutecss;
document.getElementById('minute').style.webkitTransform = minuterotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义?
if(hour>12){
hour = hour -12;
}
hourDeg = hour * 30 + minute*30/60;
var hourtrotate = 'rotate('+hourDeg+'deg)';
var hcss = '-moz-transform:' + hourtrotate + ';-o-transform:' + hourtrotate + ';-ms-transform:' + hourtrotate;
document.getElementById('hour').style.cssText = hcss;
document.getElementById('hour').style.webkitTransform = hourtrotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义?

};

//周ü期ú性?改?变?秒?钟ó的?位?置?
setInterval(function(){
var date = new Date(),
second = date.getSeconds();

var secondrotate = 'rotate('+second*6+'deg)';
var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate ;
document.getElementById('second').style.cssText = scss;
document.getElementById('second').style.webkitTransform = secondrotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义?

},1000)

//周ü期ú性?改?变?分?钟ó的?位?置?
setInterval(function(){
var date = new Date(),
second = date.getSeconds(),
minute = date.getMinutes(),
minuteDeg;
minuteDeg = minute*6 + second*6/60;
var minuterotate = 'rotate('+minuteDeg+'deg)';
var minutecss = '-moz-transform:' + minuterotate + ';-o-transform:' + minuterotate + ';-ms-transform:' + minuterotate ;
document.getElementById('minute').style.cssText = minutecss;
document.getElementById('minute').style.webkitTransform = minuterotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义?

},6000)

//周ü期ú性?改?变?时±钟ó的?位?置?
setInterval(function(){
var date = new Date(),
second = date.getSeconds(),
minute = date.getMinutes(),
hour = date.getHours(),
hourDeg;

if(hour>12){
hour = hour -12;
}
hourDeg = hour * 30 + minute*30/60;
var hourtrotate = 'rotate('+hourDeg+'deg)';
var hcss = '-moz-transform:' + hourtrotate + ';-o-transform:' + hourtrotate + ';-ms-transform:' + hourtrotate;
document.getElementById('hour').style.cssText = hcss;
document.getElementById('hour').style.webkitTransform = hourtrotate; //对?于úwebkit的?浏ˉ览à器÷,要a这a样ù定¨义?

},360000)
</script>
</body>
</html>

css 时钟的更多相关文章

  1. 复位和时钟控制（RCC）

    一.系统复位 复位除了部分RCC寄存器和备份区域以外的其他所有的寄存器: 来源: NRST引脚上的低电平(外部复位) WWDG计数结束 IWDG计数结束 软件复位(通过NVIC) 低电压管理的复位 电 ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  4. css模拟时钟

    css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appe ...

  5. 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

  6. css+ js 实现圆环时钟

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟

    思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...

  8. 学习CSS之用CSS实现时钟效果

    一.机械时钟 1.最终效果 用 CSS 绘制的机械时钟效果如下: HTML 中代码结构为: <body>     <div class="clock">   ...

  9. 纯js+html+css实现模拟时钟

    前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. <!DOCTYPE html> <html lang="en"> <head> & ...

随机推荐

  1. Linux Bash代码 利用for循环实现命令的多次执行

    Linux Bash代码 [yuanhao15@lu01 libsvm-rank-2.81]$ for ((i=0; i<=19; i++)) do ./svm-train -s 5 -c 10 ...

  2. IE10 CSS hack，IE兼容问题

    IE10 CSS hack,IE兼容问题 作者: 雪影 发表于2013 年 4 月 25 日 分类:技术分享 | 暂无评论 | 人气: 376 度 首先,ie10不支持条件注释了. 方法一:特性检测: ...

  3. 转载 jQuery validation

    之前做客户端验证感觉自己javascript 不行,虽然能写出来一完整的验证,但从不自信,一直觉得客户端验证是比较繁琐的事情,但是又不能不做,只到最开始接触ajax ,遇到了一个jQuery vali ...

  4. 【转】Nginx+php-fpm+MySQL分离部署详解

    转:http://www.linuxidc.com/Linux/2015-07/120580.htm Nginx+php-fpm+MySQL分离部署详解 [日期:2015-07-26] 来源:Linu ...

  5. 常用的js函数

    function $(){ return document.getElementById(arguments[0])}; /** * 得到上一个元素 * @param {Object} elem */ ...

  6. 亿级Web系统搭建——单机到分布式集群[转]

    当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构层 ...

  7. php file_get_contents curl发送cookie，使用代理

    $auth = base64_encode('LOGIN:PASSWORD');//LOGIN:PASSWORD 这里是你的账户名及密码 $aContext = array( 'http' => ...

  8. Windows8 10设置程序为 系统默认浏览器

    从win8 开始,MS修改了文件和协议的关联方式,普通的注册表修改是无效的. 必须使用组策略(group policy )对象GP才行. http://blogs.technet.com/b/mrml ...

  9. @Param注解在mybatis中的使用以及传入参数的几种方式（转）

    第一种: Dao层的方法 <span style="font-size:12px;">Public User selectUser(String name,String ...

  10. Unity4.3.3激活

    Unity4.X Win版本的破解方法: <ignore_js_op> 1.安装unity4.X,一路按提示下一步,要断网,直到激活运行软件后再联网2.将Unity 4.x Pro Pat ...