js动态显示时间(改进版)

发布时间:2019-11-27编辑:脚本学堂
分享一例动态显示时间的js代码,此为改进版,学习下js实现在页面显示当前时间的方法,有需要的朋友做个参考。

例子,js实现动态显示时间。
代码:
 

复制代码 代码示例:
<html>    
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     
<title>js动态显示当前日期,时间和星期代码_www.jb200.com</title>     
<mce:script type="text/javascript"><!-- 
    
function getDate(){    
var date=new Date();    
var month=date.getMonth()+1;    
var day=date.getDate();    
   
if(month.toString().length == 1){  //或者用if (eval(month) <10) {month="0"+month}    
   
month='0'+month;    
}    
if(day.toString().length == 1){    
day='0'+day;    
}    
return date.getYear()+'/'+month+'/'+day+'  '+date.toLocaleString().substring(date.toLocaleString().length-10)+'  '+'星期'+'日一二三四五六'.charAt(date.getDay());    
}    
// --></mce:script>    
</head>    
<body>    
当前时间:<div id="time">    
<mce:script type="text/javascript"><!-- 
    
document.getElementById('time').innerHTML=getDate();    
setInterval("document.getElementById('time').innerHTML=getDate();",1000);    
// --></mce:script>     
</div>     
   
<span id="day1">    
<mce:script type="text/javascript"><!--    
document.getElementById('day1').innerHTML=new Date().getYear()+"年"+(new Date().getMonth()+1)+"月"+new Date().getDate()+"日"+' 星期'+'日一二三四五六'.charAt(new Date().getDay());     
// --></mce:script>     
</span>    
      
<span id="day2">    
<mce:script type="text/javascript"><!--     
document.getElementById('day2').innerHTML=new Date().toLocaleString();     
setInterval("document.getElementById('day2').innerHTML=new Date().toLocaleString();",1000);     
// --></mce:script>    
</span>    
   
<br>    
<p>    
setInterval() 1秒后会执行,页面载入后会出现1秒空白<br>    
要显示在一行,请使用<span>标签<br>    
如果使用new Date().getHours()方法,下午的时间会返回12以上的值,我将它换为PM时间方式显示    
</P>    
</body>     
</html>