12小时的时钟

在这里插入图片描述
<!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>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#c1{ background:#FFF;}
#wrap{ width:400px; height:210px; background:#999; text-align:center;}
.text{ width:400px; height:70px; font-size:40px;}
</style>
<script>
	//获取并显示时间
	function itany(){
		var aText = document.getElementsByClassName('text');
		var oDate = new Date();
		var oYear = oDate.getFullYear();
		var oMonth = checkNum(oDate.getMonth()+1);
		var oDay = checkNum(oDate.getDate());
		aText[0].innerHTML = oYear+"年"+oMonth+"月"+oDay+"日";
		
		var oWeek = oDate.getDay();
		var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
		aText[1].innerHTML = weekday[oWeek];
		
		var oHour=checkNum(oDate.getHours());
		var oMin=checkNum(oDate.getMinutes());
		var oSec=checkNum(oDate.getSeconds());
		var noon;
		if(oHour>12){
			noon='PM';
			oHour=oHour-12;
		}else{
			noon='AM';
		}
		aText[2].innerHTML = oHour+":"+oMin+":"+oSec+"&nbsp;"+noon;
		setTimeout(itany, 1000);
	}

	//检查时间，为个位数补0
	function checkNum(num){
		if(num<10){
			num='0'+num;
		}
		return num;
	}

	//画图
	function toDraw(){
		var oC=document.getElementById('c1');
		var oGC=oC.getContext('2d');
		oGC.clearRect(0,0,oC.width,oC.height);
		var x=200;	
		var y=200;
		var r=150;
		var oDate=new Date();
		var oHour=oDate.getHours();
		var oMin=oDate.getMinutes();
		var oSec=oDate.getSeconds();
		var oHourValue = (-90 + oHour*30 + (oMin*6+oSec/10)/12) * Math.PI/180;
		var oMinValue = (-90 + oMin*6+oSec/10) * Math.PI/180;
		var oSecValue = (-90 + oSec*6) * Math.PI/180;
		
		oGC.beginPath();
		for(var i=0; i<60;i++){
			oGC.moveTo(x,y);
			oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,0)
		}
			
		oGC.closePath();
		oGC.stroke();
		
		oGC.fillStyle='white';
		oGC.beginPath();
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,0)
		
		oGC.closePath();
		oGC.fill();
		
		oGC.lineWidth='3';
		oGC.beginPath();
		for(var i=0; i<12;i++){
			oGC.moveTo(x,y);
			oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,0)
		}
			
		oGC.closePath();
		oGC.stroke();
		
		oGC.fillStyle='white';
		oGC.beginPath();
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,0)
		
		oGC.closePath();
		oGC.fill();
		
		oGC.lineWidth='5';
		oGC.beginPath();
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*14/20,oHourValue,oHourValue,0)
		
		oGC.closePath();
		oGC.stroke();
		
		oGC.lineWidth='3';
		oGC.beginPath();
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*16/20,oMinValue,oMinValue,0)
		
		oGC.closePath();
		oGC.stroke();
		
		oGC.lineWidth='1';
		oGC.beginPath();
		oGC.moveTo(x,y);
		oGC.arc(x,y,r*19/20,oSecValue,oSecValue,0)
		
		oGC.closePath();
		oGC.stroke();

		setTimeout(toDraw, 1000);
	}

	window.οnlοad=function(){
		//显示上面部分
		itany();

		//显示下面部分
		toDraw();
	}
</script>
</head>

<body>
    <div id="wrap">
    	<p class="text"></p>
        <p class="text"></p>
        <p class="text"></p>
    </div>
	<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
尚宇园
发布了75 篇原创文章 · 获赞 12 · 访问量 854
私信关注
猜你喜欢
