וובמאסטר - תיכנות ובניית אתרים

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

entry/‏ 30 מרץ, 2002
F+
F-

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

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

<DIV id="myClock"></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, המציין כי פונקצית הצגת השעון שלנו תקרא כל שנייה.

<BODY onLoad="setInterval('clock()',1000);">

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

entry

סטודיו לבניית אתרים שהוקם בינואר 2005
תגיות: JS‏  /  שעון‏  /  שעה‏  

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

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות