先看看效果：

HTML程式碼

<div class="box-clock" id="h"></div>
	<div class="box-btw">:</div>
	<div class="box-clock" id="m"></div>
	<div class="box-btw">:</div>
<div class="box-clock" id="
 
s"></div>

CSS程式碼

<style>
	.box-clock{width: 300px;height: 300px;border: 1px solid gray;float: left;margin: 50px;font-size: 200px;padding: 15px;}
	.box-btw{float: left;margin-top: 180px;font-size: 100px;}
</style>

JS程式碼

<script>
		var hour=document.getElementById('h');
		var minute=
 
document.getElementById('m');
		var second=document.getElementById('s');
		function getCurrentTime(){
			var date=new Date();
			var h=date.getHours();
			var m=date.getMinutes();
			var s=date.getSeconds();
			if(h<10)h='0'+h;
			if(m<10)m='0'+m;
			if(s<10)s='0'+s;
			hour.innerHTML = h;
			minute.
 
innerHTML = m;
			second.innerHTML = s;
		}
		setInterval("getCurrentTime()",1000);
	</script>