نحوه ساخت ساعت دیجیتال با استفاده از جاوا اسکریپت

در این آموزش ما یک ساعت دیجیتال با استفاده از جاوا اسکریپت می سازیم.
بیایید با ایجاد یک شروع کنیم <div>
عنصری که برای نمایش زمان استفاده می شود:
const clock = document.createElement("div");
document.body.appendChild(clock);
بعد ایجاد یک getTime
تابعی که زمان را محاسبه می کند:
const getTime = () => {
const date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
}
ما از جاوا اسکریپت داخلی استفاده کرده ایم Date()
شی در اینجا که نشان دهنده یک لحظه واحد در زمان است. سپس ساعت ها، دقیقه ها و ثانیه ها را از این قسمت استخراج می کنیم. هر اندازه گیری به متغیر خود اختصاص داده می شود زیرا در مرحله بعدی باید دستکاری هایی انجام دهیم.
ساعتها، دقیقهها و ثانیههای کمتر از 10 رقم صفر اولی ندارند که معمولاً هنگام قالببندی زمان دیجیتال استفاده میشود. برای رسیدن به این هدف، بررسی می کنیم که آیا واحد اندازه گیری کمتر از 10 است یا خیر.
const getTime = () => {
const date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
hour = (hour < 10) ? "0" + hour : hour;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;
};
اکنون می توانیم زمان را به ساعت خود وارد کنیم <div>
:
const getTime = () => {
const date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
hour = ("0" + hour).slice(-2);
min = ("0" + min).slice(-2);
sec = ("0" + sec).slice(-2);
const time = hour + ":" + min + ":" + sec;
clock.innerText = time;
};
اگر قرار بود اجرا کنید getTime
عملکرد در این مرحله زمان فعلی را در هنگام اجرا واکشی می کند. همانطور که ما در حال ساخت یک ساعت دیجیتال هستیم، باید زمان را با استفاده از آن واکشی و به روز کنیم SetInterval
روش در هر ثانیه (1000 میلی ثانیه):
const getTime = () => {
const date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
hour = ("0" + hour).slice(-2);
min = ("0" + min).slice(-2);
sec = ("0" + sec).slice(-2);
const time = hour + ":" + min + ":" + sec;
clock.innerText = time;
};
setInterval(getTime, 1000);
در حال حاضر ساعت در حال نمایش زمان در قالب 24 ساعته است. برای تبدیل به یک ساعت با فرمت 12 ساعته، فقط باید بررسی کنیم که آیا ساعت فعلی بیشتر از 12 است یا خیر، اگر درست است 12 ساعت را کم کنیم. ما همچنین یک متغیر merdiem را اعلام می کنیم و به آن یک AM یا PM اختصاص می دهیم که بعد از زمان نمایش داده می شود:
const getTime = () => {
const date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
hour = ("0" + hour).slice(-2);
min = ("0" + min).slice(-2);
sec = ("0" + sec).slice(-2);
let meridiem;
if (hour > 12) {
meridiem = "PM";
hour = hour - 12;
} else {
meridiem = "AM";
}
const time = hour + ":" + min + ":" + sec + " " + meridiem;
clock.innerText = time;
};
اکنون باید یک ساعت دیجیتال کاملاً کارآمد داشته باشید که با استفاده از جاوا اسکریپت ساخته شده است. وقتی نوبت به طراحی این ساعت میرسد، بهتر است از فونت monospace استفاده کنید (font-family: monospace;
). این کار از تغییر ابعاد ساعت به دلیل عرض قلم متغیر بین اعداد مختلف جلوگیری می کند.