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

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

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





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



איך לבקש מבחורה את המספר שלה ב- fb

בואו נתחיל.





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

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

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

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



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

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





Digital Clock Using JavaScript






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



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

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

function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();

הבנת קוד JavaScript

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



קבלת רכיבי הזמן הנוכחי

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

var date = new Date();

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

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

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

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

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

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

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

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

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

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

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

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

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

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

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

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

עדכון השעון בכל שנייה

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

setTimeout(Time, 1000);

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

פתח את ה styles.css קובץ והדבק את הקוד הבא:

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

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

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

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

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

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

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

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

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

העתק אנשי קשר מהאייפון לאנדרואיד

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד לבנות מחשבון פשוט באמצעות HTML, CSS ו- JavaScript

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

קרא הבא נושאים קשורים על הסופר יובראג 'צ'נדרה(פורסמו 60 מאמרים)

יובראג 'הוא סטודנט לתואר ראשון במדעי המחשב באוניברסיטת דלהי, הודו. הוא נלהב מ- Full Stack Web Development. כשהוא לא כותב, הוא בוחן את עומק הטכנולוגיות השונות.

עוד מאת Yuvraj Chandra

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה