מדריך לבניית אתרים - בלוק שעון מעוצב לאתר
משתמשי דרופל יכולים לעבור למדריך הוספת בלוק שעון לאתר, וכל השאר מוזמנים ללמוד קצת על 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 הבא לעיצוב השעון:
</style>
<head>.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 בין לוכסן כוכבית (/* */) מפני שאני לא מעוניין שיופיעו שניות בשעון. במידה ורוצים שגם השניות יופיעו פשוט מורידים את ה-/* */.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.