אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » יצירת מונה זמן שסופר לאחור באמצעות AS3

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

רן בר-זיק אפריל 24, 2011 7:36 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

מונה זמן שסופר לאחור הוא אחד הפיצ'רים שמתישהו, כאשר אתה מפתח ווידג'ט, אתה מגיע אליהם. ומה לעשות, צריך לפתח אותו. אין בעיה למצוא מונה זמן שכותב לתוך איזה אובייקט שתקעת לתוך ה-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 עובד במילישניות.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ActionScript 3 סקריפטים

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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