<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
.datetime {
width: 200px;
height: 200px;
border: 3px solid #220807;
border-radius: 50%;
box-shadow: 0px 0px 5px #220807 inset;
box-sizing: border-box;
position: relative;
color: #220807;
font-weight: bold;
}
.identity>div {
height: 95px;
border-left: 1px solid #666;
position: absolute;
top: 2px;
right: 0px;
width: 97px;
}
.identity>div>div {
width: 5px;
height: 90px;
position: absolute;
top: 5px;
left: -3px;
background-color: #fff;
font-size: 10px;
}
.crl {
height: 10px;
width: 10px;
border-radius: 50%;
z-index: 100;
background-color: #333;
position: absolute;
top: 92px;
left: 92px;
}
.currhour,
.currmi,
.currsec {
display: inline-block;
background-color: #220807;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-weight: 100;
}
</style>
</head>
<body style="overflow:hidden;">
<div id="datetime">
<div class="datetime">
<div class="identity">
<div style="border-width: 2px;z-index:99;width:96px;">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">12</div>
</div>
<div style="transform: rotate(6deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(12deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(18deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(24deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(30deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">1</div>
</div>
<div style="width:97px;transform: rotate(36deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(42deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(48deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(54deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(60deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">2</div>
</div>
<div style="width:97px;transform: rotate(66deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(72deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(78deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(84deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(90deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">3</div>
</div>
<div style="width:97px;transform: rotate(96deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(102deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(108deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(114deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(120deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">4</div>
</div>
<div style="width:97px;transform: rotate(126deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(132deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(138deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(144deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(150deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">5</div>
</div>
<div style="width:97px;transform: rotate(156deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(162deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(168deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(174deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(180deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">6</div>
</div>
<div style="width:97px;transform: rotate(186deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(192deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(198deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(204deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(210deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">7</div>
</div>
<div style="width:97px;transform: rotate(216deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(222deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(228deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(234deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(240deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">8</div>
</div>
<div style="width:97px;transform: rotate(246deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(252deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(258deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(264deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(270deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">9</div>
</div>
<div style="width:97px;transform: rotate(276deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(282deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(288deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(294deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(300deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">10</div>
</div>
<div style="width:97px;transform: rotate(306deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(312deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(318deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(324deg);transform-origin: left bottom">
<div></div>
</div>
<div style="border-width: 2px;z-index:99;width:96px;transform: rotate(330deg);transform-origin: left bottom">
<div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">11</div>
</div>
<div style="width:97px;transform: rotate(336deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(342deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(348deg);transform-origin: left bottom">
<div></div>
</div>
<div style="width:97px;transform: rotate(354deg);transform-origin: left bottom">
<div></div>
</div>
</div>
<div class="crl">
</div>
<div class="hour" style="width:4px; height:70px; position:absolute;z-index:101;background-color:#000; left:95px;box-shadow:1px -3px 7px 1px rgb(170, 170, 170);opacity:0.9; top:40px;transform: rotate(30deg);transform-origin: 1.5px 55px;">
</div>
<div class="mi" style="width:2px; height:80px; position:absolute;z-index:101;background-color:#000; left:96px;box-shadow:1px -3px 7px 1px rgb(170, 170, 170);opacity:0.9; top:30px;transform: rotate(60deg);transform-origin: 1px 67px;">
</div>
<div class="sec" style="width:1px; height:90px; position:absolute;z-index:101;background-color:rgb(255, 102, 0);box-shadow:1px -3px 7px 1px rgb(187, 187, 187);opacity:0.9; left:96.5px; top:20px;transform: rotate(90deg);transform-origin: left 77px;">
</div>
<div style="font-size:8px; position:absolute;top:110px; left:0; text-align:center;z-index:100; width:100%;">
<div class="currdate" style="margin-bottom:5px;"></div>
<div style="font-size:10px; color:#fff;">
<span class="currhour"></span>
<span class="currmi"></span>
<span class="currsec"></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
//初始化
$(".hour").css("transform", "rotate(" + h * 30 + "deg)");
$(".mi").css("transform", "rotate(" + m * 6 + "deg)");
$(".sec").css("transform", "rotate(" + s * 6 + "deg)");
$(".currdate").html(d.Format("yyyy年MM月dd日"));
$(".currhour").html(d.Format("HH"));
$(".currmi").html(d.Format("mm"));
$(".currsec").html(d.Format("ss"));
window.setInterval(function () {
//此方式不需要每次更新多个标签
s = s + 1;
if (s == 60) {
s = 0;
m = m + 1;
if (m == 60) {
m = 0;
h = h + 1;
if (h == 12) {
h = 0;
}
$(".hour").css("transform", "rotate(" + h * 30 + "deg)");
}
$(".mi").css("transform", "rotate(" + m * 6 + "deg)");
}
$(".sec").css("transform", "rotate(" + s * 6 + "deg)");
//此方式每次狗需要更新多个标签，但无需增加判断
d.setSeconds(d.getSeconds() + 1);
$(".currdate").html(d.Format("yyyy年MM月dd日"));
$(".currhour").html(d.Format("HH"));
$(".currmi").html(d.Format("mm"));
$(".currsec").html(d.Format("ss"));
}, 1000)
})
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</body>
</html>
