Jul 21

Flex中利用flash.utils.Timer类创建一个简单的时钟的例子

FlexAdd comments

接下来的例子演示了Flex中利用flash.utils.Timer类创建一个简单的时钟，当然不像一个Flash做的很漂亮的VISTA时钟(含源代码)那样功能齐全而且漂亮，本例的时钟仅仅有分，秒，微秒。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init()">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import flash.utils.Timer;
  11.             import flash.events.TimerEvent;
  12.  
  13.             private const MIN_MASK:String = "00";
  14.             private const SEC_MASK:String = "00";
  15.             private const MS_MASK:String = "000";
  16.             private const TIMER_INTERVAL:int = 10;
  17.  
  18.             private var baseTimer:int;
  19.  
  20.             private var t:Timer;
  21.  
  22.             private function init():void {
  23.                 t = new Timer(TIMER_INTERVAL);
  24.                 t.addEventListener(TimerEvent.TIMER, updateTimer);
  25.             }
  26.  
  27.             private function updateTimer(evt:TimerEvent):void {
  28.                 var d:Date = new Date(getTimer() - baseTimer);
  29.                 var min:String = (MIN_MASK + d.minutes).substr(-MIN_MASK.length);
  30.                 var sec:String = (SEC_MASK + d.seconds).substr(-SEC_MASK.length);
  31.                 var ms:String = (MS_MASK + d.milliseconds).substr(-MS_MASK.length);
  32.                 counter.text = String(min + ":" + sec + "." + ms);
  33.             }
  34.  
  35.             private function startTimer():void {
  36.                 baseTimer = getTimer();
  37.                 t.start();
  38.             }
  39.  
  40.             private function stopTimer():void {
  41.                 t.stop();
  42.             }
  43.         ]]>
  44.     </mx:Script>
  45.  
  46.     <mx:ApplicationControlBar dock="true">
  47.         <mx:Button label="Start timer" click="startTimer()" />
  48.         <mx:Button label="Stop timer" click="stopTimer()" />
  49.     </mx:ApplicationControlBar>   
  50.  
  51.     <mx:Label id="counter" fontSize="96" />
  52.  
  53. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , ,

Leave a Reply