برنامه نویسی

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

در این آموزش ما یک ساعت دیجیتال با استفاده از جاوا اسکریپت می سازیم.

بیایید با ایجاد یک شروع کنیم <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;). این کار از تغییر ابعاد ساعت به دلیل عرض قلم متغیر بین اعداد مختلف جلوگیری می کند.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا