JS实现日期时钟特效

在线演示

JS代码

<script type="text/javascript">
	function getDou(number) {
		if(number < 10) {
			return '0' + number;
		}
		else {
			return number;
		}
	}
	
	function getWeek(week) {
		var sWeek = null;
		switch(week) {
			case 0:
				sWeek = '星期日'
				break;
			case 1:
				sWeek = '星期一'
				break;
			case 2:
				sWeek = '星期二'
				break;
			case 3:
				sWeek = '星期三'
				break;
			case 4:
				sWeek = '星期四'
				break;
			case 5:
				sWeek = '星期五'
				break;
			case 6:
				sWeek = '星期六'
				break;
			default:
				break;
		}
		
		return ' ' + sWeek;
	}
	
	window.onload = function() {
		//var oDate = document.getElementsByTagName("p")[0];
		//var oTime = document.getElementsByTagName("p")[1];
		
		var oDate = document.getElementById("tickDate");
		var oTime = document.getElementById("tickTime");
		
		function timeBox() {
			var date = new Date();
			var sDate = null;
			var sTime = null;
			var hours = date.getHours();
			
			if(hours > 12) {
				hours %= 12;
				sTime = '下午 ';
			}
			else {
				sTime = '上午 ';
			}
			
			sTime += getDou(hours) + ':' + getDou(date.getMinutes()) + ':' + getDou(date.getSeconds());
			sTime += getWeek(date.getUTCDay());
			oTime.innerHTML = sTime;
			
			sDate = '';
			
			//年份
			sDate = date.getUTCFullYear() + "年";
			
			//月份
			if(date.getUTCMonth() < 9) {
				sDate += '0' + (date.getUTCMonth() + 1) + "月";
			}
			else {
				sDate += (date.getUTCMonth() + 1) + "月";
			}
			
			//日期
			sDate += date.getUTCDate() + "日";
			oDate.innerHTML = sDate;
		}
		
		setInterval(timeBox, 1000);
		timeBox();
	}
</script>
<style type="text/css">
.tickDate{text-align:center; color:#000; font-size:50px;}
.tickTime{text-align:center; color:#000; font-size:40px;}
</style>
<div>
	<p class="tickDate" id="tickDate">日期</p>
	<p class="tickTime" id="tickTime">时间</p>
</div>