html中用js动态显示时间总结

<!--关键步骤:
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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章