יצירת מונה זמן שסופר לאחור באמצעות AS3

סקריפט קצר לבניית countdown timer בפלאש באמצעות ActionScript 3

מונה זמן שסופר לאחור הוא אחד הפיצ'רים שמתישהו, כאשר אתה מפתח ווידג'ט, אתה מגיע אליהם. ומה לעשות, צריך לפתח אותו. אין בעיה למצוא מונה זמן שכותב לתוך איזה אובייקט שתקעת לתוך ה-staging, אבל קשה למצוא class פשוט של ממש שמטפל בעניין. הנה class שאני משתמש בו בכל פעם שאני צריך ספירה לאחור:


package {
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.utils.*;

	public class TimerManager {
		
		private var finalDate:Number;
		private var result:String;
		
		/**
		*	cousntructor
		*	@param timestamp type Number 
		*/
		
		public function timerManager(timestamp:Number) {

			this.finalDate = timestamp*1000; 
			var timer:Timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, this.updateTime);
			timer.start();
		}
		
		/**
		* callback for timerevent - runs every second.
		*	@param e type TimerEvent
		*/		
		
		private function updateTime(e:TimerEvent):void {
			this.result = calculateTime();
		}
		
		/**
		* calculate current date and the remaining time
		*	@return string of the result
		*/	
		
		private function calculateTime():String {
			var now:Date = new Date();
			var remainTime:Number = this.finalDate - now.getTime();
			if (remainTime >0) {
				return timerManager.millisecondsToDate(remainTime);
			}
			else {
				return 'Error';
			}
		}
		
		/**
		* take the remaining number of miiliseconds and convert it to human form
		*	@param remainTime type Number
		*	@return string of the result
		*/	
		
		private function millisecondsToDate(remainTime:Number):String {	
			var secs:Number = Math.floor(remainTime/1000);
			var mins:Number = Math.floor(secs/60);
			var hours:Number = Math.floor(mins/60);
			var days:Number = Math.floor(hours/24);
	
			var secsText:String = (secs%60).toString();
			var minsText:String = (mins%60).toString();
			var hoursText:String = (hours%24).toString();
			var daysText:String = days.toString();
	
			if (secsText.length < 2) {secsText = "0" + secsText;}
			if (minsText.length < 2) {minsText = "0" + minsText;}
			if (hoursText.length < 2) {hoursText = "0" + hoursText;}
			if (daysText.length < 2) {daysText = "0" + daysText;}
				
			return daysText+" : "+hoursText+" : "+minsText+" : "+secsText;	
		}	

		/**
		* getter of the result
		*	@return string of the result
		*/	
		
		public function getResult() {
			return this.result;
		}
	}
}

ה-class הזה הוא פשוט מאד, ה-constructor שלו מקבל timestamp (בשניות) של תאריך היעד והוא כבר מבצע את כל החישובים. מתודת getResult מחזירה לנו מחרוזת טקסט שבה יש ספירה לאחור של היעד.

אנו כמובן יכולים לשנות את ה-class כרצוננו על מנת שגם יכתוב את הטקסט ל-stage:


package {
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.utils.*;

	public class timerManager {
		
		private var finalDate:Number;
		private var result:String;
		private var dateText:Object;
		
		/**
		*	cousntructor
		*	@param timestamp type Number 
		*   @param dateText type Object
		*/
		
		public function timerManager(timestamp:Number,dateText:Object) {
			this.dateText = dateText;
			this.finalDate = timestamp; 
			var timer:Timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, this.updateTime);
			timer.start();
		}
		
		/**
		* callback for timerevent - runs every second and write result
		*	@param e type TimerEvent
		*/		
		
		private function updateTime(e:TimerEvent):void {
			var result = calculateTime();
			this.dateText.htmlText = result;
		}
		
		/**
		* calculate current date and the remaining time
		*	@return string of the result
		*/	
		
		private function calculateTime():String {
			var now:Date = new Date();
			var remainTime:Number = this.finalDate - now.getTime();
			if (remainTime >0) {
				return this.millisecondsToDate(remainTime);
			}
			else {
				return 'Error';
			}
		}
		
		/**
		* take the remaining number of miiliseconds and convert it to human form
		*	@param remainTime type Number
		*	@return string of the result
		*/	
		
		private function millisecondsToDate(remainTime:Number):String {	
			var secs:Number = Math.floor(remainTime/1000);
			var mins:Number = Math.floor(secs/60);
			var hours:Number = Math.floor(mins/60);
			var days:Number = Math.floor(hours/24);
	
			var secsText:String = (secs%60).toString();
			var minsText:String = (mins%60).toString();
			var hoursText:String = (hours%24).toString();
			var daysText:String = days.toString();
	
			if (secsText.length < 2) {secsText = "0" + secsText;}
			if (minsText.length < 2) {minsText = "0" + minsText;}
			if (hoursText.length < 2) {hoursText = "0" + hoursText;}
			if (daysText.length < 2) {daysText = "0" + daysText;}
				
			return daysText+" : "+hoursText+" : "+minsText+" : "+secsText;	
		}	
	}
}

וה-fla יראה כך:


var m_myTextField:TextField = new TextField();
var future = SOME_TIME_STAMP

var _timerManager:timerManager = new timerManager(future, m_myTextField);
this.addChild(m_myTextField);

והנה הדוגמא החיה:

הדגמת פלאש.

יש לזכור שה-timestamp שאני שולח אמור להיות timestamp בשניות, בעוד AS3 עובד במילישניות.

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

פרק מיוחד, לצד הקלטה של פרק של עושים תוכנה על אחת התקינות החשובות ביותר עבור חברות שסביר להניח שלא הכרתם

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

גלילה לראש העמוד