<!--關鍵步驟：
1，在script中用new Date()創建時間對象(var 時間集變量名=new Date();)，通過創建的對象獲取系統當前時間信息（var 變量名=時間集變量名.getYear();等）並保存下來-->
<!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=gb2312" />
<title>顯示時間</title>
<script language="javascript">
document.write("<h3 align = center>"+"用javascript在html中實現計算機系統時間顯示功能演示！"+"</h3>");
function showTime(){
var date=new Date(); //獲取時間集
<!--獲取年月日時分秒 -->
var year =date.getYear();
var month=date.getMonth()+1;
var day=date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
<!--獲取一週中系統日期的編號，星期天開始編號，編號從0開始；即星期天的編號爲0...-->
var myWeekDay = date.getDay();
var weekDay = "";
<!--根據日期在一週中的編號確定weekDay的值 ;-->
//或者直接weekDay = '星期'+'日一二三四五六'.charAt(date.getDay() or myWeekDay);
if(myWeekDay==0) weekDay = "星期日";
if(myWeekDay==1) weekDay = "星期一";
if(myWeekDay==2) weekDay = "星期二";
if(myWeekDay==3) weekDay = "星期三";
if(myWeekDay==4) weekDay = "星期四";
if(myWeekDay==5) weekDay = "星期五";
if(myWeekDay==6) weekDay = "星期六";
<!--定義變量根據需求按自己喜歡的格式保存日期-->
var word = "";
if(hours < 6){word="AM 凌晨好!";}
else if (hours < 9){word="AM 早上好!";}
else if (hours < 12){word="AM 上午好!";}
else if (hours < 14){word="NOON 中午好!";}
else if (hours < 17){word="PM 下午好!";}
else if (hours < 19){word="PM 傍晚好!";}
else if (hours < 22){word="PM 晚上好!";}
else {word="DEEP NIGHT 深夜好!";}
if(month.toString().length == 1){ //或者用if (eval(month) <10) {month="0"+month}
month='0'+month;
}
if(day.toString().length == 1){
day='0'+day;
}
if(hours.toString().length == 1){
hours='0'+hours;
}
if(minutes.toString().length == 1){
minutes='0'+minutes;
}
if(seconds.toString().length == 1){
seconds='0'+seconds;
}
<!--按自己喜歡的格式保存日期-->
var formatTime=year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds+" "+weekDay+" "+word; //或者var time = date.toLocaleString()+word;
<!--2，實現動態刷新1.setTimeout("self.location.reload();",1000); 2.window.setInterval('showTime()',1000)3.setTimeout("showTime()",1000);-->
window.setInterval("showTime()",1000);
//setTimeout("self.location.reload();",1000);
//setTimeout("showTime()",1000);
//3.實現顯示功能
document.getElementById("time").innerHTML=formatTime;//document.getElementById("time").innerText=formatTime;
//把格式化了的時間放到body中編號id爲time的div中，當body中onload屬性調用showTime()方法實現以文本形式顯示
//或者使函數帶返回值：return time; 則在body中嵌入script代碼實現顯示
}
//帶返回值,在body中嵌入script代碼實現顯示
function showTime1(){
return "本地時間："+new Date().toLocaleString();
}
</script>
</head>
<!--如果不帶返回值，則在body中用onload屬性調用showTime()方法實現顯示功能;如果帶返回值,則在body中嵌入script代碼實現顯示：-->
<body onload = "showTime()">
<div id ="time" align="center" style="color:#3366FF"><span><span></div>
<div id="time1" align="center" style="background-color:#0033FF">
<script>
document.getElementById('time1').innerHTML=showTime1();
//每隔一秒執行一次document.getElementById('time1').innerHTML=showTime1();
setInterval("document.getElementById('time1').innerHTML=showTime1();",1000);
</script>
</div>
</body>
</html>