כיצד ליצור שעון דיגיטלי באמצעות HTML, CSS ו- JavaScript

השעון הדיגיטלי הוא בין הפרויקטים הטובים ביותר למתחילים ב- JavaScript. זה די קל ללמוד עבור אנשים בכל רמת מיומנות.

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

בוא נתחיל.

רכיבי השעון הדיגיטלי

השעון הדיגיטלי כולל ארבעה חלקים: שעה, דקה, שנייה ומרידיאם.

מבנה התיקיות של פרויקט השעון הדיגיטלי

צור תיקיית שורש המכילה את קבצי ה- HTML, CSS ו- JavaScript. אתה יכול לתת שם לקבצים כל מה שאתה רוצה. כאן נקראת תיקיית השורש שעון דיגיטלי. על פי אמנת השמות הרגילה, קובצי ה- HTML, CSS ו- JavaScript נקראים index.html, סגנונות. css, ו script.js בהתאמה.

הוספת מבנה לשעון הדיגיטלי באמצעות HTML

פתח את ה index.html הקובץ והדבק את הקוד הבא:

הנה, א div נוצר עם תְעוּדַת זֶהוּת שֶׁל שעון דיגיטלי. חלוקה זו משמשת להצגת השעון הדיגיטלי באמצעות JavaScript. סגנונות. css הוא דף CSS חיצוני ומקושר לדף ה- HTML באמצעות a תָג. בדומה לכך, script.js הוא דף JS חיצוני ומקושר לדף ה- HTML באמצעות ה- <סקריפט> תָג.

הוספת פונקציונליות לשעון הדיגיטלי באמצעות JavaScript

פתח את ה script.js הקובץ והדבק את הקוד הבא:

זמן פונקציה () {
// יצירת אובייקט של מחלקת התאריך
תאריך var = תאריך חדש ();
// קבל את השעה הנוכחית
var שעה = date.getHours ();
// קבל את הדקה הנוכחית
var minute = date.getMinutes ();
// קבל שנייה עדכנית
var second = date.getSeconds ();
// משתנה לאחסון AM / PM
var period = "";
// הקצאת AM / PM לפי השעה הנוכחית
אם (שעה> = 12) {
נקודה = "PM";
} אחר {
נקודה = "AM";
}
// המרת השעה בפורמט של 12 שעות
אם (שעה == 0) {
שעה = 12;
} אחר {
אם (שעה> 12) {
שעה = שעה - 12;
}
}
// עדכון שעה, דקה ושנייה
// אם הם פחות מ -10
שעה = עדכון (שעה);
דקה = עדכון (דקה);
שנייה = עדכון (שני);
// הוספת רכיבי זמן לחלוקה
document.getElementById ("שעון דיגיטלי"). innerText = שעה + ":" + דקה + ":" + שנייה + "" + תקופה;
// הגדר טיימר לשנייה (1000 אלפיות שניים)
setTimeout (זמן, 1000);
}
// פונקציה לעדכון רכיבי זמן אם הם נמוכים מ -10
// הוסף 0 לפני רכיבי הזמן אם הם פחות מ -10
עדכון פונקציה (t) {
אם (t <10) {
החזר "0" + t;
}
אחר {
להחזיר t;
}
}
זְמַן();

הבנת קוד JavaScript

ה זְמַן() ו עדכון() פונקציות משמשות להוספת פונקציונליות לשעון הדיגיטלי.

השגת אלמנטים הזמן הנוכחי

כדי לקבל את התאריך והשעה הנוכחיים, עליך ליצור אובייקט תאריך. זהו התחביר ליצירת אובייקט תאריך ב- JavaScript:

תאריך var = תאריך חדש ();

התאריך והשעה הנוכחיים יישמרו ב תַאֲרִיך מִשְׁתַנֶה. כעת עליך לחלץ את השעה, הדקה והשנייה הנוכחיות מאובייקט התאריך.

date.getHours (), date.getMinutes (), ו date.getSeconds () משמשים לקבלת השעה, הדקה והשנייה הנוכחית בהתאמה מאובייקט התאריך. כל רכיבי הזמן מאוחסנים במשתנים נפרדים להמשך פעולות.

var שעה = date.getHours ();
var minute = date.getMinutes ();
var second = date.getSeconds ();

הקצאת המרידיאם הנוכחי (AM / PM)

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

var period = "";
אם (שעה> = 12) {
נקודה = "PM";
} אחר {
נקודה = "AM";
}

המרת השעה הנוכחית בתבנית 12 שעות

כעת עליך להמיר את השעה הנוכחית לפורמט של 12 שעות. אם השעה הנוכחית היא 0, השעה הנוכחית מתעדכנת ל -12 (לפי הפורמט של 12 השעות). כמו כן, אם השעה הנוכחית גדולה מ- 12, היא מופחתת ב- 12 כדי לשמור על התאמה לפורמט הזמן של 12 שעות.

קָשׁוּר: כיצד להשבית בחירת טקסט, גזירה, העתקה, הדבקה ולחיצה ימנית על דף אינטרנט

אם (שעה == 0) {
שעה = 12;
} אחר {
אם (שעה> 12) {
שעה = שעה - 12;
}
}

עדכון רכיבי הזמן

עליך לעדכן את רכיבי הזמן אם הם פחות מ -10 (ספרה אחת). 0 מצורף לכל מרכיבי הזמן החד-ספרתיים (שעה, דקה, שנייה).

שעה = עדכון (שעה);
דקה = עדכון (דקה);
שנייה = עדכון (שני);
עדכון פונקציה (t) {
אם (t <10) {
החזר "0" + t;
}
אחר {
להחזיר t;
}
}

הוספת רכיבי הזמן ל- DOM

ראשית, אל ה- DOM יש גישה באמצעות מזהה של div div (שעון דיגיטלי). ואז אלמנטים הזמן מוקצים לחלוקה באמצעות ה- innerText מגדיר.

document.getElementById ("שעון דיגיטלי"). innerText = שעה + ":" + דקה + ":" + שנייה + "" + תקופה;

מעדכן את השעון בכל שנייה

השעון מתעדכן בכל שנייה באמצעות setTimeout () שיטה ב- JavaScript.

setTimeout (זמן, 1000);

עיצוב השעון הדיגיטלי באמצעות CSS

פתח את ה סגנונות. css הקובץ והדבק את הקוד הבא:

קָשׁוּר: כיצד להשתמש ב- CSS box-shadow: טריקים ודוגמאות

/ * ייבוא ​​גופן פתוח של Google ללא תמצית * /
כתובת url @ (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#שעון דיגיטלי {
צבע רקע: # 66ffff;
רוחב: 35%;
שוליים: אוטומטי;
ריפוד עליון: 50 פיקסלים;
ריפוד תחתון: 50 פיקסלים;
משפחת גופנים: 'Open Sans Condensed', sans-serif;
גודל גופן: 64 פיקסלים;
יישור טקסט: מרכז;
תיבת צל: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

CSS לעיל משמש לעיצוב השעון הדיגיטלי. כאן, הגופן Open Sans Condensed משמש להצגת טקסט השעון. הוא מיובא מגופנים של גוגל באמצעות @יְבוּא. ה #שעון דיגיטלי בורר מזהה משמש לבחירת חלוקת היעד. בורר המזהים משתמש ב- תְעוּדַת זֶהוּת תכונה של אלמנט HTML לבחירת אלמנט ספציפי.

קָשׁוּר: דוגמאות פשוטות לקוד CSS שתוכלו ללמוד תוך 10 דקות

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

הערה: הקוד המשמש במאמר זה הוא מורשה MIT.

פיתוח פרויקטים אחרים של JavaScript

אם אתה מתחיל ב- JavaScript ורוצה להיות מפתח אתרים טוב, עליך לבנות כמה פרויקטים טובים מבוססי JavaScript. הם יכולים להוסיף ערך לקורות החיים שלך כמו גם לקריירה שלך.

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

אם אתה מחפש את הפרויקט הבא שלך מבוסס JavaScript, מחשבון פשוט הוא בחירה מצוינת.

כיצד לבנות מחשבון פשוט באמצעות HTML, CSS ו- JavaScript

קוד פשוט ומחושב הוא הדרך שתעבור לתכנות. בדוק כיצד לבנות מחשבון משלך ב- HTML, CSS ו- JS.

קרא הבא

על הסופר