js+css3带星期和日期时钟代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js+css3带星期和日期时钟代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)