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

‏ • 30 במרץ, 2002

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

קודם כל, נתחיל בהגדרת ה-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

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