נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך לבניית אתרים - בלוק שעון מעוצב לאתר

מחבר:
בתאריך:

משתמשי דרופל יכולים לעבור למדריך הוספת בלוק שעון לאתר, וכל השאר מוזמנים ללמוד קצת על CSS ועל JavaScript. אפשר גם לרדת לסוף המדריך, ולהעתיק משם את הקוד. הקוד עובד בשלושת הדפדפנים שבדקתי, Chrome, IE ו-Firefox.

 

הסבר על קובץ ה-HTML

נתחיל מיצירת קובץ html. נקרא לקובץ clock, ונשמור עם הסיומת html.

 

 

בתוך אזור ה-body ניצור div שבתוכו יובא השעון. 

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="clockDisplay" class="clockDesign" dir="ltr">
</div>
</body>
</html>

ל-div אנחנו נוסיף מחלקה (class) שתיצור לנו קישור לקוד CSS לעיצוב השעון, ומזהה (id) שיאפשר לנו ליצור ידית לחיבור עם סקריפט הג'אווה-סקריפט.

 

הסבר על עיצוב השעון באמצעות CSS

באזור ה-head נוסיף את קוד ה-CSS הבא לעיצוב השעון:

<head>
   <style type="text/css">
       .clockDesign{
       background-color: black;
       font-size: 18px;
       color: #0BF622;
       border: 5px inset #597572;
       height: auto;
       width: 150px;
       text-align: center;
       font-family: Impact, Arial, sans-serif;
       letter-spacing: 3px;
       }
   </style>
</head>

 

סקריפט ה-javascript לשעון

באזור ה-head, נתחיל ליצור את הסקריפט. נתחיל את הקוד ממש אחרי התגית <style/>, ונעטוף אותו בתגיות script. בתוך התגיות <script> ניצור פונקציה שייעודה בחיים להדפיס את הזמן. לפונקציה נקרא clockBlock, והיא תראה כך:

<script language="JavaScript">
      function clockBlock() {
 
     }
<script>

 

בתוך הפונקציה clockBlock, נשתמש באובייקט Date של JavaScript כדי לייצר את התאריכים והזמנים. לשם כך, ניצור מקרה חדש של האובייקט בדרך הבאה:

<script language="JavaScript">
  function clockBlock() {
       var timeNow=new Date();
  }
<script>

שימו לב שיצרנו משתנה חדש ששמו var timeNow והוא זה שמכיל את המקרה של האובייקט Date.

 

על-מנת להשתמש במקרה שיצרנו, אנחנו צריכים להכיר מספר מתודות של האובייקט Date שיודעות להחזיר את השעות, הדקות והשניות עכשיו. 

 

המתודה מה היא עושה?
getHours( )  מחזירה זמן עכשווי בשעות (0-23)
getMinutes( ) מחזירה זמן עכשווי בדקות (0-59)
getSeconds( ) מחזירה זמן עכשווי בשניות (0-59)

 

כדי להשתמש במתודות, אנחנו צריכים לחבר אותן עם המשתנה החדש שיצרנו ששמו timeNow באמצעות נקודה בין המשתנה ובין המתודה. 

לדוגמה, כדי לקבל את השעות:

timeNow.getHours()

 

וכדי לקבל את הדקות:

timeNow.getMinutes()

 

המידע שמייצרות המתודות ייכנס לתוך משתנים חדשים. hrs משתנה שעות, min משתנה דקות, sec משתנה שניות.

 

<script language="JavaScript">
   function clockBlock() {
 
      var timeNow=new Date();
      var hrs=timeNow.getHours();
      var min=timeNow.getMinutes();
      var sec=timeNow.getSeconds();
 
   }
<script>

הקוד מייצר את השעות, הדקות והשניות עכשיו בשביל השעון.

 

עכשיו נוסיף תנאים כדי להציג את הסיומת AM או PM תלוי בשעה ביום, כדי שהשעה 0 תירשם כ-12, וכדי שערך שהוא גדול מ-12 יקבל ערך קטן מ-12. לשם כך נשתמש בתנאי if:

<script language="JavaScript">
function clockBlock() {
var timeNow=new Date();
var hrs=timeNow.getHours();
var min=timeNow.getMinutes();
var sec=timeNow.getSeconds();
var amPm="AM";
if (hrs==0) {
    hrs=12;
}
if (hrs>12) {
    amPm="PM";
    hrs=hrs-12;
}
<script>

נשים לב שהמשתנה amPm מקבל ערך ברירת מחדל AM שמשתנה ל-PM רק אם hrs גדול מ-12. 

בנוסף, אם hrs גדול מ-12 אז מפחיתים מהמשתנה 12. בדרך הבאה:   hrs=hrs-12

 

אם כל אחד מהמשתנים hrs, min או sec מקבל ערך קטן מ-10 צריך להוסיף לפניו "0", אז הדרך לעשות זאת היא הבאה:

if (hrs<10) {
    hrs="0"+hrs;
}
if (min<10) {
    min="0"+min;
}
if (sec<10) {
    sec="0"+sec;
}

כדי לחבר את השעון שיצרנו, מהמשתנים שמרכיבים אותו, אנחנו צריכים משהו מהצורה הבאה:

hrs+":"+min+":"+sec+" "+amPm

 

כדי לכתוב את השעון בדף ה- html, נייצר ידית שתקשר את ה-div מקוד ה-html עם הסקריפט שלנו. לשם כך, נשתמש במתודה של האובייקט document, שהיא getElementById, כשה-id הוא clockDisplay, שהוא המזהה שנתנו ל-div:

var printClock=document.getElementById('clockDisplay');

נשים לב שאת המתודה ארזנו לתוך משתנה חדש שיצרנו ששמו printClock. 

 

לאחר שיצרנו את הידית, אנחנו יכולים לכתוב לתוכה את המשתנים, ואת זה אנחנו עושים באמצעות המתודה textContent בכל הדפדפנים מלבד IE או באמצעות innerText בדפדפני IE. נכתוב את הקוד:

var printClock=document.getElementById('clockDisplay');
printClock.textContent=hrs+":"+min+/*":"+sec+*/" "+amPm;
printClock.innerText=hrs+":"+min+/*":"+":"+sec+*/" "+amPm;

בנוסף, אנחנו רוצים שהפונקציה תרוץ כל שנייה. אז בשביל זה, נשתמש בפונקציה setTimeout. שהתחביר שלה כולל את השם של הפונקציה שלה אנחנו קוראים, וכל כמה זמן באלפיות השנייה אנחנו קוראים לפונקציה. 

setTimeout('clockBlock()',1000)

כלומר, נקרא לפונקציה clockBlock כל 1000 אלפיות השנייה (= כל שנייה). 

בתוך קוד ה-html אנחנו צריכים לשתול קריאה לפונקציה clockBlock בכל פעם שהדף נטען. לשם כך, נמקם את הקריאה בתוך תגית ה-body כשהאירוע הוא onLoad, כלומר כשהדף נטען.

<body onLoad="clockBlock()">

הקוד המלא לשעון

<!DOCTYPE html>
<head>
     <style type="text/css">
         .clockDesign{
              background-color: black;
              font-size: 18px;
              color: #0BF622;
              border: 5px inset #597572;
              height: auto;
              width: 150px;
              padding: 0px auto;
              text-align: center;
              font-family: Impact, Arial, sans-serif;
              letter-spacing: 3px;
         }
    </style>
<script language="JavaScript">
 
     function clockBlock() {
 
           var timeNow=new Date();
 
            var hrs=timeNow.getHours();
            var min=timeNow.getMinutes();
            var sec=timeNow.getSeconds();
            var amPm="AM";
 
            if (hrs==0) {
                   hrs=12;
            }
 
            if (hrs>12) {
                    amPm="PM";
                    hrs=hrs-12;
            }
            if (hrs<10) {
                    hrs="0"+hrs;
            }
            if (min<10) {
                    min="0"+min;
            }
            if (sec<10) {
                    sec="0"+sec;
            }
 
           var printClock=document.getElementById('clockDisplay');
           printClock.textContent=hrs+":"+min+/*":"+sec+*/" "+amPm;
           printClock.innerText=hrs+":"+min+/*":"+":"+sec+*/" "+amPm;
 
            setTimeout('clockBlock()',1000);
 
     } 
     </script>
</head>
<body onLoad="clockBlock()">
          <div id="clockDisplay" class="clockDesign" dir="ltr">
          </div>
</body>
</html>

נשים לב שהוספתי את המשתנה sec בין לוכסן כוכבית (/*  */) מפני שאני לא מעוניין שיופיעו שניות בשעון. במידה ורוצים שגם השניות יופיעו פשוט מורידים את ה-/*  */.

לכל מדריכי ה-javascript

 

הוסף תגובה חדשה

 

= 3 + 5