在Actionscript 3.0中創建世界時鐘

Question

我一直在修改此代碼時出現問題，以便顯示5個不同的世界時鐘。現在，simpleClock代碼只顯示一個簡單的時鐘。我需要幫助的是讓它顯示彼此相鄰的5個時鐘，並且每個時鐘具有世界上特定城市的時間。我知道我只需要根據該城市的時間更改每個時鐘的小時數，但我還需要讓時鐘更改顏色來表示一天中的時間。這是AnalogClockFace和SimpleClock的代碼。如果有人能幫助我，我會真的，非常感謝！謝謝。

package com.example.programmingas3.simpleclock import flash.display.Shape; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.text.StaticText; import flash.events。*; import flash.text.TextField; import flash.text.TextFormat;

/** 
* Displays a round clock face with an hour hand, a minute hand, and a second hand. 
*/ 
public class AnalogClockFace extends Sprite 
{ 
    /** 
    * The desired width of this component, as opposed to the .width 
    * property which represents tha actual width. 
    */ 
    public var w:uint = 200; 

    /** 
    * The desired height of this component, as opposed to the .height 
    * property which represents tha actual height. 
    */ 
    public var h:uint = 200; 

    /** 
    * The radius from the center of the clock to the 
    * outer edge of the circular face outline. 
    */ 
    public var radius:uint; 

    /** 
    * The coordinates of the center of the face. 
    */ 
    public var centerX:int; 
    public var centerY:int; 

    /** 
    * The three hands of the clock. 
    */ 
    public var hourHand:Shape; 
    public var minuteHand:Shape; 
    public var secondHand:Shape; 

    /** 
    * The colors of the background and each hand. 
    * These could be set using parameters or 
    * styles in the future. 
    */ 
    public var bgColor:uint = 0xEEEEFF; 
    public var hourHandColor:uint = 0x003366; 
    public var minuteHandColor:uint = 0x000099; 
    public var secondHandColor:uint = 0xCC0033; 

    /** 
    * Stores a snapshot of the current time, so it 
    * doesn't change while in the middle of drawing the 
    * three hands. 
    */ 
    public var currentTime:Date; 

    /** 
    * Contructs a new clock face. The width and 
    * height will be equal. 
    */ 
    public function AnalogClockFace(w:uint) 
    { 
     this.w = w; 
     this.h = w; 

     // Rounds to the nearest pixel 
     this.radius = Math.round(this.w/2); 

     // The face is always square now, so the 
     // distance to the center is the same 
     // horizontally and vertically 
     this.centerX = this.radius; 
     this.centerY = this.radius; 
    } 

    /** 
    * Creates the outline, hour labels, and clock hands. 
    */ 
    public function init():void 
    { 
     // draws the circular clock outline 
     drawBorder(); 

     // draws the hour numbers 
     drawLabels(); 

     // creates the three clock hands 
     createHands(); 
    } 

    /** 
    * Draws a circular border. 
    */ 
    public function drawBorder():void 
    { 
     graphics.lineStyle(0.5, 0x999999); 
     graphics.beginFill(bgColor); 
     graphics.drawCircle(centerX, centerY, radius); 
     graphics.endFill(); 
    } 

    /** 
    * Puts numeric labels at the hour points. 
    */ 
    public function drawLabels():void 
    { 
     for (var i:Number = 1; i <= 12; i++) 
     { 
      // Creates a new TextField showing the hour number 
      var label:TextField = new TextField(); 
      label.text = i.toString(); 

      // Places hour labels around the clock face. 
      // The sin() and cos() functions both operate on angles in radians. 
      var angleInRadians:Number = i * 30 * (Math.PI/180) 

      // Place the label using the sin() and cos() functions to get the x,y coordinates. 
      // The multiplier value of 0.9 puts the labels inside the outline of the clock face. 
      // The integer value at the end of the equation adjusts the label position, 
      // since the x,y coordinate is in the upper left corner. 
      label.x = centerX + (0.9 * radius * Math.sin(angleInRadians)) - 5; 
      label.y = centerY - (0.9 * radius * Math.cos(angleInRadians)) - 9; 

      // Formats the label text. 
      var tf:TextFormat = new TextFormat(); 
      tf.font = "Arial"; 
      tf.bold = "true"; 
      tf.size = 12; 
      label.setTextFormat(tf); 

      // Adds the label to the clock face display list. 
      addChild(label); 
     } 
    } 

    /** 
    * Creates hour, minute, and second hands using the 2D drawing API. 
    */ 
    public function createHands():void 
    { 
     // Uses a Shape since it's the simplest component that supports 
     // the 2D drawing API. 
     var hourHandShape:Shape = new Shape(); 
     drawHand(hourHandShape, Math.round(radius * 0.5), hourHandColor, 3.0); 
     this.hourHand = Shape(addChild(hourHandShape)); 
     this.hourHand.x = centerX; 
     this.hourHand.y = centerY; 

     var minuteHandShape:Shape = new Shape(); 
     drawHand(minuteHandShape, Math.round(radius * 0.8), minuteHandColor, 2.0); 
     this.minuteHand = Shape(addChild(minuteHandShape)); 
     this.minuteHand.x = centerX; 
     this.minuteHand.y = centerY; 

     var secondHandShape:Shape = new Shape(); 
     drawHand(secondHandShape, Math.round(radius * 0.9), secondHandColor, 0.5); 
     this.secondHand = Shape(addChild(secondHandShape)); 
     this.secondHand.x = centerX; 
     this.secondHand.y = centerY; 
    } 

    /** 
    * Draws a clock hand with a given size, color, and thickness. 
    */ 
    public function drawHand(hand:Shape, distance:uint, color:uint, thickness:Number):void 
    { 
     hand.graphics.lineStyle(thickness, color); 
     hand.graphics.moveTo(0, distance); 
     hand.graphics.lineTo(0, 0); 
    } 

    /** 
    * Called by the parent container when the display is being drawn. 
    */ 
    public function draw():void 
    { 
     // Stores the current date and time in an instance variable 
     currentTime = new Date(); 
     showTime(currentTime); 
    } 

    /** 
    * Displays the given Date/Time in that good old analog clock style. 
    */ 
    public function showTime(time:Date):void 
    { 
     // Gets the time values 
     var seconds:uint = time.getSeconds(); 
     var minutes:uint = time.getMinutes(); 
     var hours:uint = time.getHours(); 

     // Multiplies by 6 to get degrees 
     this.secondHand.rotation = 180 + (seconds * 6); 
     this.minuteHand.rotation = 180 + (minutes * 6); 

     // Multiplies by 30 to get basic degrees, and then 
     // adds up to 29.5 degrees (59 * 0.5) to account 
     // for the minutes 
     this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5); 
    } 
} 

}

包com.example.programmingas3.simpleclock {

import flash.display.Sprite; 

public class SimpleClock extends Sprite 
{ 
    import com.example.programmingas3.simpleclock.AnalogClockFace; 
    import flash.events.TimerEvent; 
    import flash.utils.Timer; 

    /** 
    * The time display component. 
    */ 
    public var face:AnalogClockFace; 

    /** 
    * The Timer that acts like a heartbeat for the application. 
    */ 
    public var ticker:Timer; 

    public static const millisecondsPerMinute:int = 1000 * 60; 
    public static const millisecondsPerHour:int = 1000 * 60 * 60; 
    public static const millisecondsPerDay:int = 1000 * 60 * 60 * 24; 

    /** 
    * Sets up a SimpleClock instance. 
    */ 
    public function initClock(faceSize:Number = 200):void 
    { 

     // Creates the clock face and adds it to the Display List 
     face = new AnalogClockFace(Math.max(20, faceSize)); 
     face.init(); 
     addChild(face); 

     // Draws the initial clock display 
     face.draw(); 

     // Creates a Timer that fires an event once per second. 
     ticker = new Timer(1000); 

     // Designates the onTick() method to handle Timer events 
     ticker.addEventListener(TimerEvent.TIMER, onTick); 

     // Starts the clock ticking 
     ticker.start(); 
    } 

    /** 
    * Called once per second when the Timer event is received. 
    */ 
    public function onTick(evt:TimerEvent):void 
    { 
     // Updates the clock display. 
     face.draw(); 
    }  
} 

}

Answer 1

你將不得不改變一對夫婦的功能在AnalogFace代表的時間這個時鐘所在的城市。

 
    private var tzOffset:Number; 

    public function initClock(faceSize:Number = 200 , offset:Number):void 
    { 
     tzOffset = offset; 
     // the rest of the code here... 
    } 

    public function draw():void 
    { 
     // Stores the current date and time in an instance variable 
     //currentTime = new Date(); 

     var localTime:Date = new Date() 

     // too lazy , I let you handle the code for that ;) 
     // You need to change the currentTime property 
     // Get the UTC time , add the tzOffset (which can be negative depending on the city) 
     // then get your localTime value as a Date object 
     showTime(localTime); 
    } 

將您的位置置於一個對象數組中，這些對象將在幾分鐘內包含城市名稱和timeZoneOffset。

var locations:Array = [{city:Paris , timeZoneOffset: 60 } , etc...]; 

假設您的SimpleClock正在工作，創建五個時鐘，您將創建五個簡單時鐘實例。

var padding:int = 20; //the distance between each clock 
var clockX:int; // a variable that you'll use to place the clock on the x axis 

for(var i:int ; i < locations.length ; ++i) 
{ 
    var clock:SimpleClock = new SimpleClock(); 
    clock.initClock(200 , locations[i].timeZoneOffset); 
    clock.x = clockX; 
    clockX += clock.width + padding; 

    //here you can update your Array of objects with the clock value 
    //so Paris will have the first clock etc... , to change the order , change the 
    order in the Array 
    locations[i].clock = clock; 
} 

只要你正確地得到您的計算時差，這應該工作...