利用javascript实现动态显示当前时间的效果代码实例

很简单的一个功能函数,实现方式很少言,用date()对象获取到当前时间,而后用settimeout每隔1秒获取最新的时间.
写的过程当中碰到过一个小小的问题: 我最初的想法是用setinterval()每隔1秒获取最新时间,但是能够,但setinterval若是放在主函数内部,但致使内存泄漏(至于缘由, 暂时还没想明白),后来在rocky的提醒下用settimeout()才解决内存泄漏问题

function nowtime(ev,type){
 /*
  * ev:显示时间的元素
  * type:时间显示模式.若传入12则为12小时制,不传入则为24小时制
  */
 //年月日时分秒
 var y,m,d,w,h,i,s;
 //月日时分秒为单位时前面补零
 function fillzero(v){
  if(v<10){v='0'+v;}
  return v;
 }
 (function(){
  var d=new date();
  var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
  y=d.getfullyear();
  m=fillzero(d.getmonth()+1);
  d=fillzero(d.getdate());
  w=week[d.getday()];
  h=fillzero(d.gethours());
  i=fillzero(d.getminutes());
  s=fillzero(d.getseconds());
  //12小时制显示模式
  if(type && type==12){
   //若要显示更多时间类型诸如中午凌晨可在下面添加判断
   if(h<=12){
    h='上午&nbsp;'+h;
   }else if(h>12 && h<24){
    h-=12;
    h='下午&nbsp;'+fillzero(h);
   }else if(h==24){
    h='下午&nbsp;00';
   }
  }
  ev.innerhtml=y+'年'+m+'月'+d+'日 '+'&nbsp;'+w+'&nbsp;'+h+':'+i+':'+s;
  //每秒更新时间
  settimeout(arguments.callee,1000);
 })();
}

完整实例代码

<style>
/*demo css教程*/
#demo h2{margin:20px 0 20px 20%;font:normal 24px/1.5 'comic sans ms';letter-spacing:2px;line-hight:2}
#demo h2 em{margin-right:12px;padding:0 7px;border-top-left-radius:8px;-webkit-border-top-left-radius:8px;-moz-border-radius-topleft:8px;background:#d2d9df;color:#000;font-family:5fae8f6f96c59ed1;letter-spacing:0}
#demo h2 span{text-shadow:1px 2px 3px #ccc}
</style>
<script>

window.onload=function(){
 function nowtime(ev,type){
  /*
   * ev:显示时间的元素
   * type:时间显示模式.若传入12则为12小时制,不传入则为24小时制
   */
  //年月日时分秒www.3ppt.com
  var y,m,d,w,h,i,s;
  //月日时分秒为单位时前面补零
  function fillzero(v){
   if(v<10){v='0'+v;}
   return v;
  }
  (function(){
   var d=new date();
   var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
   y=d.getfullyear();
   m=fillzero(d.getmonth()+1);
   d=fillzero(d.getdate());
   w=week[d.getday()];
   h=fillzero(d.gethours());
   i=fillzero(d.getminutes());
   s=fillzero(d.getseconds());
   //12小时制显示模式
   if(type && type==12){
    //若要显示更多时间类型诸如中午凌晨可在下面添加判断
    if(h<=12){
     h='上午&nbsp;'+h;
    }else if(h>12 && h<24){
     h-=12;
     h='下午&nbsp;'+fillzero(h);
    }else if(h==24){
     h='下午&nbsp;00';
    }
   }
   ev.innerhtml=y+'年'+m+'月'+d+'日 '+' '+w+'&nbsp;'+h+':'+i+':'+s;
   //每秒更新时间
   settimeout(arguments.callee,1000);
  })();
 }
 
 //24小时制调用
 nowtime(document.getelementbyid('time24'));
 //12小时制调用
 nowtime(document.getelementbyid('time12'),12);

}
</script>

<div id="demo">
 <h2 title="当前时间"><em>24小时制：</em><span id="time24"></span></h2>
 <h2 title="当前时间"><em>12小时制：</em><span id="time12"></span></h2>
</div>