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> & ...
随机推荐
- C语言中static变量详解
Static翻译出来是“静态”“静止”的意思,在C语言中的意思其实和它的本意差不多,表示“静态”或者“全局”的意思,用来修饰变量和函数.经static修饰过后的变量或者函数的作用域或者存储域会发生变化 ...
- Combination Sum [LeetCode]
Problem Description: http://oj.leetcode.com/problems/combination-sum/ Basic idea: It seems complicat ...
- RAID5和RAID10，哪种RAID更适合你(上)
[IT168 专稿]存储是目前IT产业发展的一大热点,而RAID技术是构造高性能.海量存储的基础技术,也是构建网络存储的基础技术.专家认为,磁盘阵列的性能优势得益于磁盘运行的并行性,提高设备运行并行度 ...
- JavaScript第一部分
一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...
- 数据库索引<一> 索引结构表结构
有很长时间没有更新博客了,再过几天都2月分了,如果再不更新一篇,我1月分都没有更新,保持连续,今天更新一篇. 最近没有什么看技术方面的东西,游戏,画画搞这些去了.我发现我每年一到年底就是搞这些东西,其 ...
- 有一种感动叫ACM（记WJMZBMR在成都赛区开幕式上的讲话）
各位选手,各位教练,大家好,我是来自清华大学交叉信息学院的陈立杰,今天很荣幸站在这里代表全体参赛选手发言.对于我来说,这是我第一次正式参加ACM的比赛.不过我跟ACM之间的缘分,大概在很早的时候就已经 ...
- VS复习 -- if···else和if···else嵌套语句
注意:理清逻辑,画出逻辑分支图,理清思路 1.if语句 2.if...else语句 3.if..else if...else static void Main(string[] args) { Con ...
- ios基础篇（八）——UITabBarController的简单介绍
一.简介 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例子就 ...
- Caffe 深度学习框架介绍
转自:http://suanfazu.com/t/caffe/281 Caffe是一个清晰而高效的深度学习框架,其作者是博士毕业于UC Berkeley的贾扬清,目前在Google工作. Caffe是 ...
- Jquery 表格操作，记录分页情况下，每一页中被用户勾选的信息
如下图,一个分页列表,用户可以随意勾选一条或多条信息,然后进行某种操作,如“提交”.但是有个问题:如果勾选了一条信息之后,点[下一页],那么上一页 勾选的条目被刷新掉了. 问题:如果用户需要在第1页, ...