پروژه ۳: ساعت دیجیتال با تغییر تم خودکار (DOM و زمان)
۱. طرح مسئله (Problem)
چگونه میتوانیم سایتی بسازیم که به زمان حساس باشد؟ هدف این پروژه ساخت ساعتی است که هر ثانیه آپدیت شود و اگر ساعت از ۱۸ (۶ عصر) گذشت، ظاهر باکس نمایش تغییر کرده و به حالت “شب” برود.
۲. راه حل و اجرا (Solution)
00:00:00
۳. توضیح مفصل کد (Analysis)
function updateClock() {
const now = new Date();
const hours = now.getHours();
// تغییر استایل در DOM
if (hours >= 18) {
element.style.backgroundColor = ‘#333’;
}
}
setInterval(updateClock, 1000);
const now = new Date();
const hours = now.getHours();
// تغییر استایل در DOM
if (hours >= 18) {
element.style.backgroundColor = ‘#333’;
}
}
setInterval(updateClock, 1000);
- ✅ شیء Date: این شیء تمام اطلاعات زمان و تاریخ فعلی سیستم کاربر را در اختیار ما قرار میدهد.
- ✅ setInterval: این یکی از مهمترین توابع جاوااسکریپت برای “تکرار” است. ما به آن گفتیم که هر ۱۰۰۰ میلیثانیه (۱ ثانیه) تابع ما را دوباره اجرا کند تا ساعت حرکت کند.
- ✅ دستکاری استایل (Inline Style): ما مستقیماً از طریق جاوااسکریپت به CSS دسترسی پیدا کردیم و ویژگی
backgroundColorرا تغییر دادیم.