طراحی ساعت دیجیتال با استفاده از HTML ، CSS و JavaScript
طراحی ساعت دیجیتال یکی از بهترین پروژه های مبتدی در JavaScript است. یادگیری آن برای افراد از هر سطح مهارت کاملاً آسان است. در این مقاله ، شما می آموزید که چگونه یک ساعت دیجیتال را با استفاده از HTML ، CSS و JavaScript برای خود طراحی کنید. شما با استفاده از مفاهیم مختلف JavaScript مانند ایجاد متغیرها ، استفاده از توابع ، کار با تاریخ ، دسترسی و افزودن خصوصیات به DOM و موارد دیگر تجربه عملی خواهید داشت.
مراحل کار را با موارد بیان شده در ادامه شروع کنید :
اجزای ساعت دیجیتال
ساعت دیجیتال دارای چهار قسمت است: ساعت ، دقیقه ، ثانیه و مریدیم.
ساختار پوشه پروژه ساعت دیجیتال
یک پوشه ریشه ایجاد کنید که حاوی فایل های HTML ، CSS و JavaScript باشد. می توانید فایلها را هر چیزی که می خواهید نامگذاری کنید. در اینجا پوشه ریشه ما Digital-Clock نام دارد . مطابق قرارداد نامگذاری استاندارد ، فایلهای HTML ، CSS و JavaScript به ترتیب index.html ، styles.css و script.js نامگذاری می شوند.
افزودن ساختار به ساعت دیجیتال با استفاده از HTML
فایل index.html را باز کرده و کد زیر را وارد کنید:
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Digital Clock Using JavaScript </title> <link rel = "stylesheet" href = "styles.css"> </head> <body> <div id = "digital-clock"> </div> <script src = "script.js"> </script> </body> </html>
در کد بالا ، یک DIV با شناسه digital-clock داریم . این div برای نمایش ساعت دیجیتال با استفاده از JavaScript استفاده می شود. styles.css یک صفحه CSS خارجی است و با استفاده از یک برچسب <link> به صفحه HTML پیوند داده می شود. به همین ترتیب ، script.js یک صفحه JS خارجی است و با استفاده از برچسب < script> به صفحه 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
از توابع () Time و () update برای افزودن قابلیت به ساعت دیجیتال استفاده می شود.
دریافت عناصر زمان فعلی
برای دریافت تاریخ و زمان فعلی ، باید یک شی تاریخ ایجاد کنید. این کد برای ایجاد یک شی Date در 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)
از آنجا که ساعت دیجیتال در قالب ۱۲ ساعته است ، شما باید مریدیم مناسب را با توجه به ساعت فعلی اختصاص دهید. اگر ساعت فعلی بیشتر از ۱۲ باشد یا برابر آن باشد ، مریدیم PM (Post Meridiem) است ، در غیر این صورت AM است (Ante Meridiem).
var period = "";
if (hour >= 12) {
period = "PM";
} else {
period = "AM";
}
تبدیل ساعت جاری در قالب ۱۲ ساعته
اکنون باید ساعت فعلی را به قالب ۱۲ ساعته تبدیل کنید. اگر ساعت فعلی ۰ باشد ، ساعت فعلی به ۱۲ (مطابق با قالب ۱۲ ساعته) به روز می شود. همچنین ، اگر ساعت فعلی بیشتر از ۱۲ باشد ، ۱۲ برابر می شود تا با قالب زمان ۱۲ ساعته همسو شود.
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
به روزرسانی عناصر زمان
اگر عناصر زمان کمتر از ۱۰ باشد (تک رقمی) باید ۰ به تمام عناصر زمان تک رقمی (ساعت ، دقیقه ، ثانیه) ضمیمه می شود.
hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t < 10) {
return "0" + t;
}
else {
return t;
}
}
افزودن عناصر زمان به DOM
ابتدا با استفاده از شناسه div ( digital-clock ) به DOM دسترسی پیدا می شود . سپس عناصر زمان با استفاده از تنظیم کننده innerText به div اختصاص می یابد .
document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;
هر ثانیه ساعت را به روز کنید
ساعت با استفاده از روش () setTimeout در JavaScript هر ثانیه به روز می شود .
setTimeout(Time, 1000);
زیبا کردن ساعت دیجیتال با استفاده از CSS
فایل styles.css را باز کرده و کد زیر را وارد کنید:
/* 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 برای نمایش متن ساعت استفاده می شود. با استفاده از import@ فونت های گوگل وارد می شود . از digital-clock# برای انتخاب تقسیم هدف استفاده می شود.
اگر می خواهید به منبع کامل کد مورد استفاده در این مقاله نگاهی بیندازید ، این کد در مخزن GitHub موجود است . همچنین ، اگر می خواهید نگاهی به نسخه زنده این پروژه بیندازید ، می توانید آن را از طریق GitHub Pages بررسی کنید .
توجه : کد استفاده شده در این مقاله دارای مجوز MIT است .
سایر پروژه های JavaScript را توسعه دهید
اگر مبتدی JavaScript هستید و می خواهید یک توسعه دهنده وب خوب باشید ، باید پروژه های جالب و خوب مبتنی بر JavaScript مانند طراحی ساعت دیجیتال با HTML و جاوا اسکریپت را بسازید. آنها می توانند به رزومه و همچنین شغل شما ارزش دهند.
می توانید برخی از پروژه ها مانند ماشین حساب ، بازی Hangman ، Tic Tac Toe ، یک برنامه آب و هوایی JavaScript ، یک صفحه فرود تعاملی ، یک ابزار تبدیل وزن ، قیچی کاغذ و غیره را امتحان کنید.
اگر به دنبال پروژه بعدی خود مبتنی بر JavaScript هستید ، یک ماشین حساب ساده یک انتخاب عالی است.
دیدگاه ها