用flex如何显示数字时钟

刚好今天做到这一块，顺便把源码贴出来供大家参考下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="210" height="70"
 creationComplete="init()" styleName="filletCanvas">
 <mx:Script>
        <![CDATA[
        private var _time:Date;     //日期
        private var timer:Timer;    //计数器
  /**
   * init()
   *
   * 初始化控件
   *
   * @param
      * @return void
      * @author Xueyy<[e-mail]>
      * @create 2009/02/09
   */
  public function init():void
  {
            this.showCurDate(); 
            timer.addEventListener(TimerEvent.TIMER,timeHandler);
            timer.start();   
  }
  
  public function showCurDate():void
  {
         _time = new Date();
         var monStr:String;
         var dateStr:String;
         var hoursStr:String;
         var minutesStr:String;
         var secondsStr:String;
        
      var seconds:Number = _time.getSeconds();  //秒
   var minutes:Number = _time.getMinutes();  //分
   var hours:Number = _time.getHours();      //时
   var day:Number = _time.getDay();          //星期
   var date:Number = _time.getDate();        //日
   var month:Number = _time.getMonth()+1;     //月
   var year:Number = _time.getFullYear();    //年         
            timer = new Timer(1000);
           
   if (month<10)
   {
    monStr = "0"+String(month);
   }
   else
   {
    monStr = String(month);
   }
             
   if (date<10)
   {
       dateStr = "0"+String(date);
   }  
   else
   {
    dateStr = String(date);
   } 
         
   if (hours<10)
   {
       hoursStr = "0"+String(hours);
   }           
   else
   {
    hoursStr = String(hours);
   }
   
   if (minutes<10)
   {
       minutesStr = "0"+String(minutes);
   }
   else
   {
    minutesStr = String(minutes);
   }
   
   if (seconds<10)
   {
      secondsStr = "0"+String(seconds);
   }
   else
   {
    secondsStr = String(seconds);
   }
         txtDateTime.text = year+"/"+monStr+"/"+dateStr+" "+hoursStr+":"+minutesStr+":"+secondsStr;      //响应每秒更新一次
  
  }
  
     public function timeHandler(evt:TimerEvent):void
     {
      this.showCurDate();
     }  
        ]]>
    </mx:Script>
 <mx:Text x="10" y="44" id="txtDateTime" width="180" fontSize="10" height="23" textAlign="left" fontWeight="normal" paddingTop="3"/>
</mx:Canvas>

总结：这里面主要用到了定时器和flex自带的Date,有了这两个做这一件事就很方便了。

评论

2 楼 p_x1984 2009-06-08  

方法有多种，学习了!谢谢

1 楼 roar_x 2009-06-03  

不用那么麻烦

prviate var timer:Timer;
private function timeInit():void //时钟
{  
   timer = new Timer(1000);  
   timer.addEventListener(TimerEvent.TIMER, resetNow);  //每秒执行一次resetNow
   timer.start();  
}  
             
private function resetNow(event:TimerEvent):void
{
    var today:String = dateFormatter.format(new Date());  //当前时间
     data.text = today.toString();
    clock.text = new Date().toLocaleTimeString();  
}  

<mx:DateFormatter id="dateFormatter" formatString="YYYY年MM月DD日>

<mx:Label x="354" y="65" id="clock" creationComplete="timeInit()" width="93.95" height="20" fontSize="12" textAlign="center"/>
<mx:Label x="255" y="10" id="data" creationComplete="timeInit()" width="294.95" height="43" fontSize="24" textAlign="center"/>