今天根据项目需求,简单写了一下获取当前时间,并显示在网页上的功能。其源代码如下:
<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代码效果展示在页面上啊,求教