js实现时钟转动，显示当前系统时间
引入了jquery 和一款旋转插件
下载地址：
链接：http://pan.baidu.com/s/1c13yieG 密码：pfwi
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery.js"></script>
<script src="jQueryRotateZoom_v1.1.js"></script>
<script>
var now = new Date();
var year = now.getFullYear(); //年份2016
console.log(year);
var month = now.getMonth() + 1; //月份 从0开始 7
console.log(month);
var day = now.getDate(); //一个月的哪一天 3
console.log(day);
var d = now.getDay(); //一个星期的第几天0
console.log(d);
var hour = now.getHours();
hour = hour%12;
console.log(hour);
var minite = now.getMinutes();
console.log(minite);
var second = now.getSeconds();
console.log(second);
var mi = now.getMilliseconds();
console.log(mi);
var mill = now.getTime();
console.log(mill);
//设定初始时间代码：
$(document).ready(function(){
$('.second').rotate({angle:second*6});
});
$(document).ready(function(){
$('.minite').rotate({angle:minite*6});
});
$(document).ready(function(){
$('.hour').rotate({angle:hour*30+Math.floor(minite*0.5)});
});
//指针旋转代码:
var sangle = second*6;
setInterval(function(){
sangle +=6;
$('.second').rotate(sangle);
},1000);
var mangle = minite*6;
setInterval(function(){
mangle +=6;
$('.minite').rotate(mangle);
},60000);
var hangle = hour*30;
setInterval(function(){
hangle +=30;
$('.hour').rotate(hangle);
},60000*60);
//文本显示实现
$(document).ready(function(){
$('.time').text(hour+":"+minite+":"+second+" "+year+"/"+month+"/"+day);
});
</script>
<style type="text/css">
#clock{
position:relative;
width:100px;
height:100px;
border:1px solid black;
border-radius:50%;
margin:50px auto;
}
.mark{
height:100%;
width:0;
border:1px solid black;
}
.absolute-center{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
.compass{
width:95%;
height:95%;
background-color:white;
border-radius:50%;
}
.hour{
height:50%;
transform:rotate(0deg);
border-color:transparent;
}
.minite{
height:75%;
transform:rotate(0deg);
border-color:transparent;
}
.second{
height:80%;
border-color:transparent;
}
.hour2,.minite2,.second2{
height:60%;
bottom:auto;
}
.case{
width:100px;
height:120px;
border:1px solid black;
}
.time{
text-align: center;
}
</style>
</head>
<body>
<div id="clock">
<div class="mark absolute-center"></div>
<div class="mark absolute-center" style="transform:rotate(30deg)"></div>
<div class="mark absolute-center" style="transform:rotate(60deg)"></div>
<div class="mark absolute-center" style="transform:rotate(90deg)"></div>
<div class="mark absolute-center" style="transform:rotate(120deg)"></div>
<div class="mark absolute-center" style="transform:rotate(150deg)"></div>
<div class="compass absolute-center">
<div class="absolute-center mark hour">
<div class="mark absolute-center hour2"></div>
</div>
<div class="absolute-center mark minite">
<div class="mark absolute-center minite2"></div>
</div>
<div id="second" class="absolute-center mark second">
<div class="mark absolute-center second2"></div>
</div>
</div>
</div>
<div class="case absolute-center">
<p class="time"></p>
<p>如需知道具体时间请按F5</p>
</div>
</body>
</html>
