js 获取当前时间，展示电子时间功能

今天根据项目需求，简单写了一下获取当前时间，并显示在网页上的功能。其源代码如下：

<script type="text/javascript">

window.onload=function(){
// 时间格式：今天是2013年12月20日 上午10:10
var chId= document.getElementById("nowTime");
function geTime(){
var nTime=new Date();
var nY=nTime.getFullYear();
var nM=nTime.getMonth()+1;
var nD=nTime.getDate();
var nH=nTime.getHours();
var nMi=nTime.getMinutes();
var nSe=((nTime.getSeconds()%2)==1)?":":" "; //动态闪烁，来表示秒数
nMi=nMi>10?nMi:"0"+nMi;
if(nH>5&&nH<12){
nH=nH>10?nH:"0"+nH;
nH="上午"+nH;

}
else if(nH>12&&nH<18){
nH=nH-12;
nH=nH>10?nH:"0"+nH;
nH="下午"+nH;

}
else if(nH>18&&nH<24){
nH=nH-12;
nH=nH>10?nH:"0"+nH;
nH="晚上"+nH;
}
else{
nH="0"+nH;
nH="凌晨"+(nH);
}
str="今天是"+ nY+"年"+nM+"月"+nD+"日 "+nH+nSe+nMi;
chId.innerHTML=str;//将时间赋予页面内容里
setTimeout(geTime,1000);

}
geTime()

}
</script>
效果如下：

今天是2013年12月20日 上午10:10

 

 

 

 

 

这里有几个注意事项：

   1、获取时间 getFullYear个getYear的区别和误区。
             getYear，有些浏览器是默认以1900年为基准的，导致显示的时候，就成了114年。有些则是正常的，故需要注意。
             getFullYear 浏览器显示都是一样，显示结果为当前的结果
  2、循环计时器用setTimeout比setInterval好。
           简单原因是：浏览器是单线程的。setTimeout能够保证每次函数事件运行完毕，隔一秒后再出发这次函数事件。

                          而setInterval则是每隔一秒钟调用一次该函数事件。（有可能事件运行事件大于1s，或者无法保证每次调用时间相隔不是1s，无法正常计时。）

            具体原因可以百度一下。

3、判断当前时间是早上、中午、晚上、凌晨，我这里用了几个判断。并给与时间只有个位数，前面自动补零。
4、根据小时候看电子表的经历，我这里并没有直接显示秒数，而是通过”：“闪烁来动态表示时间的刷新。

总结：

    1、看似简单的内容，写的时候出了不少问题。特别是简单的内容。

    2、注意判断的时候，把最大概率的判断放在前面，这样就会减少浏览器的判断。比如，早上，晚上的判断。我判断凌晨的人最少，所以把这个判断放在了最后。
    3、这个简单的时钟显示，觉得还太粗糙，特别是每秒都要重新生成时间，每次浪费的资源不少。需要改进：

           改进思路：  1、每次获取一次的当前时间，减少系统时间调用。然后对获得的当前毫秒数进行处理显示时间。

                           2、有判断的获取时间，比如年，可以很少进行刷新。月、天，小时，选择性进行刷新。想必也能减少时间判断。

    4、刚刚写文章，逻辑比较混乱，希望不正确之处，大家多多指点。欢迎留言给我指导。

   ps：如何插入js代码效果展示在页面上啊，求教