css 时钟
（转自：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 时钟的更多相关文章
- 复位和时钟控制（RCC）
一.系统复位 复位除了部分RCC寄存器和备份区域以外的其他所有的寄存器: 来源: NRST引脚上的低电平(外部复位) WWDG计数结束 IWDG计数结束 软件复位(通过NVIC) 低电压管理的复位 电 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- css模拟时钟
css模拟时钟 思路: 画时钟数字(x,y)坐标 x = x0 + r*cos(deg) y = y0 + r*sin(deg) 知识点: 创建元素: createElement 添加元素: appe ...
- 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
- css+ js 实现圆环时钟
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
- 学习CSS之用CSS实现时钟效果
一.机械时钟 1.最终效果 用 CSS 绘制的机械时钟效果如下: HTML 中代码结构为: <body> <div class="clock"> ...
- 纯js+html+css实现模拟时钟
前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. <!DOCTYPE html> <html lang="en"> <head> & ...
随机推荐
- 重载Array类的contains方法
var allFilters = self.filtersContainer?.filters ?? [OpalFilter]() if let sorter = filtersContainer?. ...
- express+nodecoffee写passport登录验证实例(一）
项目中要用到passport登录验证,环境如标题样:express框架,coffee模版引擎,node后台 一:建项目 直接用express命令建,虽然默认模版为jade,可以手动换成coffee哦. ...
- uva 1220
1220 - Party at Hali-Bula Time limit: 3.000 seconds Dear Contestant, I'm going to have a party at my ...
- 《Play for Java》学习笔记（七）数据类型解析——Body parser
一.什么是body parser? body parser(不知道具体如何翻译,~~~~(>_<)~~~~ )指一个HTTP请求 (如POST和PUT操作)所包含的文本内容(body),这 ...
- 转python编码问题
python的编码问题 http://blog.csdn.net/fuadam/article/details/5547504 分类: .net以外的东东 2010-04-30 21:16 747人阅 ...
- DataGridView批量执行Insert和Remove行时特别慢的解决方案
向DataGridView循环插入110条数据耗时5秒多. 在循环前执行: var oldAutoSizeRowsMode = this.AutoSizeRowsMode; var oldAutoSi ...
- WPF TreeView的使用
WPF提供了treeView控件,利用该控件开发者可以将数据分层显示在树结构中.当然其中需要用到Binding的机制,有用的类包括:ObjectDataProvider.DataTemplate.Hi ...
- bzoj 1911: [Apio2010]特别行动队
#include<cstdio> #include<iostream> #define M 1000009 #define ll long long using namespa ...
- 一模 （2） day2
第一题: 题目大意:给出n种物品和每种物品的件数,求拿k件的方案数.N<=30 解题过程: 1.一开始总想着是组合数学的模型,结果怎么都想不出来..然后写了个爆搜,数据很弱,只有1个点超时. 2 ...
- C#获取指定日期为一年中的第几周
/// <summary> /// 获取指定日期,在为一年中为第几周 /// </summary> /// <param name="dt">指 ...