js+html5实现简易指针时钟表代码

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

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

以下是 js+html5实现简易指针时钟表代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js+html5实现简易指针时钟表代码</title>
<script>
	window.onload=function(){
		var clock=document.getElementsByClassName("clock")[0];
		draw();
		var time=new Date();
		var h=drawpointer(8,100,"#000",time.getHours()*30+time.getMinutes()*6/12);
		var m=drawpointer(6,180,"#000",time.getMinutes()*6);
		var s=drawpointer(4,260,"red",time.getSeconds()*6);
		setInterval(function(){
			var time=new Date();
			h.style.transform="rotate("+(time.getHours()*30+time.getMinutes()*6/12)+"deg)";
			m.style.transform="rotate("+time.getMinutes()*6+"deg)";
			s.style.transform="rotate("+time.getSeconds()*6+"deg)"
		},1000);
		function draw(){
			for(var i=0;i<60;i++){
				var newdiv=document.createElement("div");
				var m,h;
				if(i%5==0){
					m=8;
					h=25;
				}else{
					m=6;
					h=15;
				}
				newdiv.style.cssText="width:"+m+"px;height:"+h+"px;background:#000;position:absolute;left:0;top:0;transform:translate("+(600-m)/2+"px,0) rotate("+i*6+"deg);transform-origin:"+m/2+"px 300px"
				clock.appendChild(newdiv);
			}
		}


		function drawpointer(w,h,b,d){
			var newdiv=document.createElement("div");
//                中间的圆
			var newd=document.createElement("div");
			newd.style.cssText="width:50px;height:50px;border-radius:50%;background: radial-gradient(circle at 50% 50%,rebeccapurple,royalblue);position:absolute;left:"+(600-50)/2+"px;top:"+(600-50)/2+"px;"
			newdiv.style.cssText="width:"+w+"px;height:"+h+"px;position:absolute;left:"+(600-w)/2+"px;top:"+(300-h)+"px;background:"+b+";transform:rotate("+d+"deg);transform-origin:center bottom;";
			clock.appendChild(newdiv);
			clock.appendChild(newd);
			return newdiv;
		}
	}
</script>
<style>
	body{
		background: radial-gradient(circle at 50% 50%,#ccc,rebeccapurple);
	}
	.clock{
		width: 600px;
		height: 600px;
		/*background: radial-gradient(circle at 50% 50%,rebeccapurple,royalblue);*/
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		border-radius: 50%;
	}
</style>
</head>
<body>
<div class="clock"></div>>
</body>
</html>

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