איך בונים שעון?

WebMaster Team ‏ • 30 במרץ, 2002

הגדרת מקום התצוגה

קודם כל, נתחיל בהגדרת ה-DIV בוא אנו רוצים להציג את השעון:

זהו DIV פשוט, ללא תוכן. ניתן לו את בתור ID את myClock, כדי שבהמשך נוכל לפנות אליו ולהציג בו תוכן.

בניית הפונקציה

השלב השני, הוא לבנות את הפונקציה שתציג את השעון. לפונקציה נקרא clock.

נגדיר משתנה אשר יכיל את השעה הנוכחית:

var now = new Date();

נשלוף מהמשתנה את השעה, הדקות והשניות:

var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();

נגדיר משתנה בשם TheTime אשר יכיל את השעה הסופית, ונכניס לתוכו את השעה הנוכחית. למקרה והשעה היא בפורמט 24 שעות, נבדוק האם השעה גדולה מ-12, ואם כן – נפחית 12. אם התוצאה היא 0, אזי השעה היא בדיוק 12.

var TheTime = "" + ((hours >12) ? hours -12 :hours)
if TheTime == "0") TheTime = 12;

נשרשר למשתנה TheTime גם את הדקות והשניות, מופרדות בנקודותיים ':'.

באותו זמן, גם נבדוק אם הדקות והשניות הן חד-ספרתיות, ואם כן, נוסיף 0 לפניהן.

TheTime += ((minutes < 10) ? ":0" : ":") + minutes
TheTime += ((seconds < 10) ? ":0" : ":") + seconds

נבדוק אם השעה גדולה מ-12, ונוסיף AM או PM בהתאם.

TheTime += (hours >= 12) ? " PM" : " AM"

נציג את השעה ב-DIV שיצרנו קודם, ושמו myClock:

myClock.innerHTML = TheTime

והנה הפונקציה במלואה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function clock ()
{
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();

    var seconds = now.getSeconds()
    var TheTime = "" + ((hours > 12) ? hours –12 :hours)
    if (TheTime == "0") TheTime = 12;
    TheTime += ((minutes < 10) ? ":0" : ":") + minutes
    TheTime Value += ((seconds < 10) ? ":0" : ":") + seconds
    TheTime += (hours >= 12) ? " P.M." : " A.M."
    myClock.innerHTML = TheTime ;
}

הקריאה לפונקציה:

הפעלת השעון תעשה בארוע טעינת גוף המסמך:
נקרא לפונקציה setInterval, עם הפרמטר 1000, המציין כי פונקצית הצגת השעון שלנו תקרא כל שנייה.

והנה… יש לנו שעון.

תגיות: JS, שעה, שעון

איך בונים שעון?

הגדרת מקום התצוגה

בניית הפונקציה

הקריאה לפונקציה:

עוד בנושא זה

תגובות בפייסבוק

תגיות