时钟
2016-05-03 16:21
435 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="clock.css" rel="stylesheet" type="text/css"/>
<script src="clock.js"></script>
<title>时钟</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#bg{
width:210px;
height: 100px;
background-color: #00cc00;
padding-top: 25px;
}
#clock{
width: 46px;
height: 46px;
border: 7px solid #fff;
border-radius: 50%;
position: relative;
left: 50%;
margin-left: -30px;
}
#h{
width: 6px;
height: 17px;
background-color: #fff;
border-radius: 1px;
position: absolute;
top: 6px;
left: 20px;
transform-origin: 50% 18px;
}
#m{
width: 6px;
height: 20px;
background-color: #fff;
border-radius: 2px;
position: absolute;
top:3px;
left: 20px;
transform-origin: 50% 20px;
}
#s{
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
position: absolute;
top:-7px;
left: 20px;
transform-origin: 50% 30px;
animation:circle 1.6s linear 0s infinite normal forwards;
-moz-animation:circle 1.6s linear 0s infinite normal forwards;
-webkit-animation:circle 1.6s linear 0s infinite normal forwards;
-o-animation:circle 1.6s linear 0s infinite normal forwards;
}
@keyframes circle
{
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
@-moz-keyframes circle
{
0% {-moz-transform: rotate(0deg)}
100% {-moz-transform: rotate(360deg)}
}
@-webkit-keyframes circle
{
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}
@-o-keyframes circle
{
0% {-o-transform: rotate(0deg)}
100% {-o-transform: rotate(360deg)}
}
#circle{
width:8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 19px;
left: 19px;
}
</style>
</head>
<body>
<div id="bg">
<div id="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
<div id="circle"></div>
</div>
</div>
</body>
<script type="text/javascript">
function rotate(){
var now = new Date();
var s = now.getSeconds();
var sDeg = 10*s;
var m = now.getMinutes();
var mDeg = 6*(m+s/60);
var h = now.getHours();
h>12&&(h-=12);
var hDeg = (m/60+s/3600+h)*30;
document.getElementById("m").style.transform="rotate("+sDeg+"deg)";
//document.getElementById("m").style.transform="rotate("+mDeg+"deg)";
document.getElementById("h").style.transform="rotate("+hDeg+"deg)";
}
window.onload=function(){
rotate();
setInterval(rotate,10);
}
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="clock.css" rel="stylesheet" type="text/css"/>
<script src="clock.js"></script>
<title>时钟</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#bg{
width:210px;
height: 100px;
background-color: #00cc00;
padding-top: 25px;
}
#clock{
width: 46px;
height: 46px;
border: 7px solid #fff;
border-radius: 50%;
position: relative;
left: 50%;
margin-left: -30px;
}
#h{
width: 6px;
height: 17px;
background-color: #fff;
border-radius: 1px;
position: absolute;
top: 6px;
left: 20px;
transform-origin: 50% 18px;
}
#m{
width: 6px;
height: 20px;
background-color: #fff;
border-radius: 2px;
position: absolute;
top:3px;
left: 20px;
transform-origin: 50% 20px;
}
#s{
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
position: absolute;
top:-7px;
left: 20px;
transform-origin: 50% 30px;
animation:circle 1.6s linear 0s infinite normal forwards;
-moz-animation:circle 1.6s linear 0s infinite normal forwards;
-webkit-animation:circle 1.6s linear 0s infinite normal forwards;
-o-animation:circle 1.6s linear 0s infinite normal forwards;
}
@keyframes circle
{
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
@-moz-keyframes circle
{
0% {-moz-transform: rotate(0deg)}
100% {-moz-transform: rotate(360deg)}
}
@-webkit-keyframes circle
{
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}
@-o-keyframes circle
{
0% {-o-transform: rotate(0deg)}
100% {-o-transform: rotate(360deg)}
}
#circle{
width:8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 19px;
left: 19px;
}
</style>
</head>
<body>
<div id="bg">
<div id="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
<div id="circle"></div>
</div>
</div>
</body>
<script type="text/javascript">
function rotate(){
var now = new Date();
var s = now.getSeconds();
var sDeg = 10*s;
var m = now.getMinutes();
var mDeg = 6*(m+s/60);
var h = now.getHours();
h>12&&(h-=12);
var hDeg = (m/60+s/3600+h)*30;
document.getElementById("m").style.transform="rotate("+sDeg+"deg)";
//document.getElementById("m").style.transform="rotate("+mDeg+"deg)";
document.getElementById("h").style.transform="rotate("+hDeg+"deg)";
}
window.onload=function(){
rotate();
setInterval(rotate,10);
}
</script>
</html>
相关文章推荐
- oStrictHostKeyChecking=no 参数
- Java注解Annotation详解
- php发送get、post请求的几种方法
- 2015 Objective-C 三大新特性
- 选中字体的背景颜色
- 算法训练 A+B Problem
- 云计算从服务到公共资源的演化之路
- Session
- 网址收藏
- opencv图像拼接,即把两个矩阵合并为一个(vconcat和hconcat)、Mat成员函数size()
- 2016软考 网络工程师5天修炼读书笔记
- Android 注解框架----Butter knife
- Fragment 中的onConfigurationChanged 在切换语言的情况下不被回调的解决办法
- LeetCode347—Top K Frequent Elements
- IDEA快捷键 如syso(sout Tab键)main(psvm Tab键)
- mapreduce 多种输入
- 算法训练 采油区域
- 算法训练 会议中心
- mybatis分页(数据库oracle)
- 剑指offer 和为S的两个数字