יצירת מונה זמן שסופר לאחור באמצעות 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 עובד במילישניות.

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

מיקרו בקרים

חיבור מצלמה למיקרובקר

חיבור מצלמה למיקרו בקר ויצירה של מצלמת אבטחה מרחוק בעלות של 20 שקל.

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

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

נגישות טכנית – פודקאסט ומבוא

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

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