הצגת תאריך ושעה בעזרת JavaScript

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

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

var d=new Date();

הפונקציה getDay היא פונקציה שמחזירה כערך מספר בטווח 0-6 כאשר כל אחד מהם מסמל יום בשבוע (מיום ראשון (0) עד שבת (6)). כמובן שזה לא ממש עוזר לנו כשאנחנו רוצים להדפיס את שם היום ולכן נבנה מערך עזר קטן:

var weekday=new Array(7);
weekday[0]="א'";
weekday[1]="ב'";
weekday[2]="ג'";
weekday[3]="ד'";
weekday[4]="ה'";
weekday[5]="ו'";
weekday[6]="ש'";

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

weekday[d.getDay()];

הפונקציות getFullYear, getMonth ו getDate מחזירות את הערך של השנה, היום והחודש בתאריך הלועזי. אך היות ואנחנו רוצים לשמור על מבנה אחיד אנחנו עלולים "להיתקע" בימים / חודשים בעלי ספרה בודדת (1-9), זה ההבדל בין 01.04.2009 לבין 1.4.2009. השלב הבא הוא כמובן אינו חובה, אבל הוא יעזור לנו לייצר את התאריך בפורמט הרצוי לנו.

var month ="";
if (d.getMonth()<10)
	month = "0" +d.getMonth();
else
	month = d.getMonth();
var day ="";
if(d.getDate()<10)
	day =  "0" + d.getDate();
else 				
	day = d.getDate();

היות והזמן נמדד לפי GMT, יש חשיבות לגבי הפרש השעות בין GMT לזמן המקומי. כרגע אנחנו נמצאים ב Gmt+3 אם כי זה מדלג ל 2+ בתלות בשעון חורף, שעון קיץ ושאר העולם. לכן, נשלוף את הפרש הזמנים בין הזמן המקומי ל GMT ונוסיף לשעה שמחזיר אובייקט התאריך. חשוב לשים לב שהפונקציה getTimezoneOffset מחזירה ערך בסימן הפוך מהמצופה, כלומר למרות שאנחנו ב gmt+3 הפונקציה תחזיר כתשובה 3- שכן היא מחסרת את GMT מהזמן המקומי ולא להפך. לכן, כשמוסיפים את ההפרש לשעה צריך למעשה לחסר אותו מהשעה.

var hour = d.getTimezoneOffset();
var newHour = (d.getUTCHours() - hour/60)%24 ;

היות ואנחנו מבצעים פה חיבור פשוט, יכול להיווצר מצב שבו נקבל שעה שהיא יותר גדולה מחצות. אם למשל השעה היא 23:00 ועל זה נוסיף 3 שעות נגיע אל 26:00. הפעולה %24 מחזירה את השארית של חלוקה ב 24, כלומר שבמקרה שלנו השארית מחלוקת 26 ב 24 היא 2, שזו השעה הנכונה. ושוב, כמו עם התאריך, בגלל סיבות של שעות / דקות הקטנות מ 10 עלולה להתקבל תצוגה 1:8 עבור השעה אחת ושמונה דקות, קצת מכוער ולכן נוסיף את האפס במקרים הללו.

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

var str = "יום ";
str += weekday[d.getDay()];
str += " " + day +"/" + month  + "/" + d.getFullYear() ;
str +=" " + newHour+ ":" + d.getUTCMinutes();

כרגע יש לנו משתנה בשם str שמכיל מחרוזת ארוכה עם התאריך שלנו, אבל עדיין אינו מציג אותה. על מנת להציג את המחרוזת נוסיף לקוד ה HTML בעמוד DIV חדש בעל שם יחודי.

ונוסיף לסקריפט שלנו הוראה לעדכן את התוכן של mainDate.

document.getElementById('mainDate').innerHTML = str;

חשוב לציין שכדי שהטקסט יופיע במקום הרצוי לנו. צריך לדאוג שהסקריפט יופיע אחרי המיקום של ה DIV שכן אם הסקריפט יופיע לפניו הוא ירוץ לפני שהאובייקט יווצר ולכן הטקסט לא יופיע. מי שנוהג לשמור את הסקריפטים שלו בסוף הקוד לא צריך לדאוג בקטע הזה. מי שמעדיף לשמור את הסקריפטים שלו בתחילת העמוד (בקטע של ה head) מוטב יעשה אם ישתמש ב window.onload שיקרא לפונקציה שלו בסוף העמוד.

מי שרוצה להוריד את הסקריפט המלא ימצא אותו כאן