<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+css3带星期和日期时钟代码 - 网页模板</title>
</head>
<body>
<style type="text/css">
#box{
width:206px;height:206px;border-radius:100px;margin:100px auto;background:black;position:relative;
box-shadow:2px 2px 5px #b2b2b2,2px -2px 5px #b2b2b2,-2px 2px 5px #b2b2b2,-2px -2px 5px #b2b2b2,4px 4px 6px #b87333,4px -4px 6px #b87333,-4px 4px 6px #b87333,-4px -4px 6px #b87333;
}
#dial{
height:200px;border:3px solid #b87333;border-radius:103px;position:relative;
}
#dial span{
width:2px;height:6px;background:#b87333;position:absolute;top:0;left:99px;
transform-origin:0 100px;
-webkit-transform-origin:0 100px;
-moz-transform-origin:0 100px;
}
#hand{
width:12px;height:12px;position:absolute;left:97px;top:97px;
}
#hour{
width:5px;height:45px;background:#b87333;position:absolute;left:4px;bottom:6px;
transform-origin:bottom;
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
}
#min{
width:2px;height:60px;background:#b87333;position:absolute;left:5px;bottom:6px;
transform-origin:bottom;
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
}
#sec{
width:2px;height:75px;background:#b87333;position:absolute;left:5px;bottom:6px;
transform-origin:bottom;
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
}
#center{
width:12px;height:12px;border-radius:12px;background:#b87333;position:absolute;top:0;left:0;
}
#dial span:nth-child(5n+1){
height:10px;background:#b87333;
}
.gradient{
width:206px;height:206px;border-radius:103px;position:absolute;top:0;left:0;
background:linear-gradient(120deg,transparent,rgba(0,0,255,0.7));
background:-webkit-linear-gradient(120deg,transparent,rgba(0,0,255,0.7));
background:-moz-linear-gradient(120deg,transparent,rgba(0,0,255,0.7));
}
#win{
background:white;width:40px;height:16px;position:absolute;left:140px;top:94px;font-size:12px;text-align:center;height:16px;
box-shadow:2px 2px 2px#b87333 inset,-1px -1px 2px#b87333 inset;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDial=document.getElementById('dial');
var oHour=document.getElementById('hour');
var oMin=document.getElementById('min');
var oSec=document.getElementById('sec');
toDial(oDial);
toTime(oHour,oMin,oSec);
setInterval(function(){
toTime(oHour,oMin,oSec);
},1000)
var oDate=new Date();
var week=oDate.getDay();
var date=oDate.getDate();
var array=['日','一','二','三','四','五','六'];
var win=document.getElementById('win');
var str="<a>"+array[week]+"</a>|<a>"+date+"</a>";
win.innerHTML=str;
}
function toTime(oHour,oMin,oSec){
var oDate=new Date();
var iSec=oDate.getSeconds();
var iMin=oDate.getMinutes()+iSec/60;
var iHour=(oDate.getHours()%12)+iMin/60;
oSec.style.webkitTransform="rotate("+(iSec*360/60)+"deg)";
oMin.style.webkitTransform="rotate("+(iMin*360/60)+"deg)";
oHour.style.webkitTransform="rotate("+(iHour*360/12)+"deg)";
oSec.style.MozTransform="rotate("+(iSec*360/60)+"deg)";
oMin.style.MozTransform="rotate("+(iMin*360/60)+"deg)";
oHour.style.MozTransform="rotate("+(iHour*360/12)+"deg)";
}
function toDial(obj){
var sHtml="";
var iDeg=6;
for(var i=0;i<60;i++){
sHtml+="<span style='-webkit-transform:rotate("+iDeg*i+"deg)'></span>";
sHtml+="<span style='-moz-transform:rotate("+iDeg*i+"deg)'></span>"
}
obj.innerHTML=sHtml;
}
</script>
<div id="box">
<div id="dial"></div>
<div id="win"></div>
<div id="hand">
<div id="hour"><span></span></div>
<div id="min"><span></span></div>
<div id="sec"><span></span></div>
<div id="center"></div>
</div>
<div class="gradient"></div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
