JS实现实时时钟-CSDN博客

熬夜不只一杯水, 听着一夜的歌。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js作业2：20170330 钟表框架</title>
<style>
	#c_frame{
		width: 200px;
		height: 200px;
		border: dashed 1px #f00;
		border-radius: 50%;
		margin: 50px auto;
		
		position: relative; //内部的元素都相对此进行绝地定位;
	}
	#hour,#minute,#second{
		width: 200px;
		height: 200px;
		position: absolute; /*不加这句,这几个DIV要飞到天边去了== */
	}/*这几个div和他们的内部div都是相对于c_frame进行绝对定位的.*/
	
	
/*	#hour{
		border: solid 1px gray;
	}*/
	#hour div{
		height: 100px;
		width: 2px;
		border: solid 1px black;
		background-color: #000;
		
		position: absolute; /*相对于#c_frame进行绝对定位*/
		left: 50%;
		top: 10px;
	}
	
/*	#minute{
		border: solid 1px gray;	
	}*/
	#minute div{
		height: 100px;
		width: 1px;
		border: solid 1px black;
		
		position: absolute; /*相对于#c_frame进行绝对定位*/
		left: 50%;
		top: 10px;
		
	}
	
/*	#second{
		border: solid 1px gray;
	}*/
	#second div{ /*00.从最简单的秒针开始理解*/
		height: 100px;
		width: 1px;
		border: dashed 1px gray;
		
		position: absolute; /*相对于#c_frame进行绝对定位*/
		left: 50%;
		top: 10px;
	}
	
	
	
	/*之前,我是让 border-right:0,1,2;来显示针的,但没有设置旋转基点,所以才导致没法出目的结果的.*/
</style>
</head>
	
<body>
<div id="c_frame">
	
	<div id="hour">
		<div></div>
	</div>
		
	<div id="minute">
		<div></div>
	</div>
	
	<div id="second">
		<div></div>
	</div>
</div>

<center>
<div id="show">现在时间是:</div>
</center>

<script>

	var h,m,s;//时分秒;
	var d;//日期;
	var t=document.getElementById("show");//这里显示电子时间;
	
	setInterval(function(){ //利用时间值获取度数进行旋转.简单说,就是旋转度数随时间变化而变化.
		var d=new Date();
		
		h=d.getHours();
		m=d.getMinutes();
		s=d.getSeconds();
		
		document.getElementById("hour").style.transform="rotate("+h*30+"deg)";	//360°相比12时 相差 30倍;另外,钟表只有12个小时。
		document.getElementById("minute").style.transform="rotate("+m*6+"deg)";
		document.getElementById("second").style.transform="rotate("+s*6+"deg)"; //360°相比60秒 相差6倍;
		
		
		//增加个电子时间显示:-->案例二开始:
		
		t.innerHTML=("现在时间是: "+e_time(h)+":"+e_time(m)+":"+e_time(s)+" "+isPAm());
		
		
	},900);
	
	function e_time(val){
		
		if(val<10){
			 return ("0"+val);
		}
		return val;
	}
	
	function isPAm(){
		if(h<=12){
			return "am";
		}
		return "pm";
	}
	//案例二结束.
	
/*本质性质:(以秒针为例)
 * 
	 div-secods是一个和 div-c_frame一样宽高的div(可以设置比div-c_frame一些),
	 
	 然后在div-seconds 内配置一个div,这个是seconds内部的div,用于显示秒针，
	 
	 旋转的是div-seconds,而显示的是只有div-seconds一半大小的div-seconds内部的div(它会显示一个秒针);
	 所以,实际转动的div-s,旋转默认是以div中心为基点的。
	 
	 基于同理,时、分针也是如此;(Ps: 旋转基点是可以修改的,但在这里没必要).
 *//*之前错误的原因是:让 border-right或left充当显示针和旋转针,但没有设置旋转基点。*/
</script>
</body>
</html>

效果见图:

转载于:https://my.oschina.net/IndustrialRevolutio/blog/871245