سورس کد ساعت نئونی دیجیتال و آنالوگ با HTML، CSS و JS

ساعت دیجیتال و آنالوگ نئونی یک پروژه سبک و مدرن تحت وب است که با استفاده از HTML، CSS و JavaScript خالص (Vanilla JS) ساخته شده و زمان و تاریخ سیستم کاربر را به‌صورت زنده نمایش می‌دهد. این سورس کد برای توسعه‌دهندگان فرانت‌اند، دانشجویان و برنامه‌نویسانی طراحی شده که به دنبال یک پروژه واقعی و قابل شخصی‌سازی برای تمرین یا استفاده در وب‌سایت خود هستند.

پروژه ترکیبی از سه بخش اصلی است: ساعت عقربه‌ای (آنالوگ)، نمایشگر دیجیتال زمان، و نمایش تاریخ روز. رابط کاربری با پس‌زمینه تیره و افکت‌های نئونی طراحی شده و در تمام دستگاه‌ها از موبایل تا دسکتاپ به‌درستی نمایش داده می‌شود. برای اجرای پروژه، نیازی به بک‌اند، دیتابیس، Node.js، PHP یا هر سرویس خارجی دیگری ندارید؛ کافی است فایل index.html را در مرورگر باز کنید.

ساعت دیجیتال و آنالوگ نئونی — معرفی کامل پروژه

ساعت یکی از پرکاربردترین عناصر رابط کاربری در پروژه‌های تحت وب است. از داشبوردهای مدیریتی و پنل‌های اطلاعاتی گرفته تا صفحه‌های شخصی و نمونه‌کارهای فرانت‌اند، نمایش زمان و تاریخ به‌صورت زنده می‌تواند ارزش زیادی به یک رابط کاربری اضافه کند. این سورس کد با همین هدف طراحی شده است: ساخت یک ساعت سبک، زیبا و کاربردی که در عین سادگی، ظاهر مدرن و جذابی داشته باشد.

برخلاف بسیاری از پروژه‌های مشابه که به کتابخانه‌های سنگین مثل jQuery، Moment.js یا Chart.js نیاز دارند، این پروژه به‌طور کامل با تکنولوژی‌های پایه وب پیاده‌سازی شده است. HTML برای ساختار، CSS برای ظاهر و JavaScript برای منطق زمان و حرکت عقربه‌ها استفاده شده‌اند. همین سادگی باعث می‌شود حجم پروژه بسیار کم باشد، سرعت بارگذاری بالا باشد و توسعه آن برای هر برنامه‌نویسی با دانش مقدماتی تا متوسط فرانت‌اند امکان‌پذیر باشد.

ویژگی‌های اصلی ساعت نئونی

نمایش هم‌زمان ساعت عقربه‌ای و دیجیتال

یکی از ویژگی‌های متمایز این پروژه، ترکیب دو نوع نمایش زمان است: یک ساعت عقربه‌ای کلاسیک در کنار یک نمایشگر دیجیتال. کاربر می‌تواند هم موقعیت عقربه‌ها را ببیند و هم عدد دقیق ساعت، دقیقه و ثانیه را به‌صورت دیجیتال مشاهده کند. این ترکیب تجربه کاربری منحصربه‌فردی ایجاد می‌کند که در ساعت‌های معمولی تحت وب کمتر دیده می‌شود.

به‌روزرسانی خودکار زمان

زمان به‌صورت خودکار و لحظه‌ای به‌روزرسانی می‌شود. کاربر نیازی به Refresh کردن صفحه ندارد و ساعت همیشه با سیستم همگام است. برای این کار از قابلیت setInterval در JavaScript استفاده شده که در فواصل زمانی مشخص، تابع به‌روزرسانی ساعت را اجرا می‌کند.

نمایش تاریخ روز

در کنار زمان، تاریخ روز نیز در صفحه نمایش داده می‌شود. این بخش با استفاده از شیء Date در JavaScript پیاده‌سازی شده و تاریخ میلادی را نشان میدهد.

طراحی نئونی و Dark UI

رابط کاربری این ساعت با پس‌زمینه تیره و رنگ‌های نئونی طراحی شده است. عقربه‌ها، نقطه مرکزی ساعت و نمایشگر دیجیتال همگی دارای افکت Glow هستند که با استفاده از خصوصیت box-shadow و text-shadow در CSS ایجاد شده‌اند. این سبک طراحی برای پروژه‌های تکنولوژی، داشبوردهای مدرن و وب‌سایت‌هایی با هویت بصری متمایز بسیار مناسب است.

طراحی واکنش‌گرا (Responsive)

ساعت روی اندازه‌های مختلف صفحه نمایش سایز یکسانی دارد اما در موبایل تا مانیتورهای بزرگ به‌درستی نمایش داده می‌شود.

اجرای کاملاً سمت کاربر

تمام منطق پروژه در مرورگر اجرا می‌شود. هیچ درخواستی به سرور ارسال نمی‌شود و پروژه می‌تواند به‌صورت کاملاً آفلاین کار کند. این ویژگی، پروژه را برای انتشار روی GitHub Pages، Netlify، Vercel و هر هاست استاتیک دیگری مناسب می‌کند.

تکنولوژی‌های استفاده‌شده در سورس ساعت

پروژه با سه تکنولوژی پایه وب ساخته شده که هر کدام وظیفه مشخصی دارند:

• HTML5 — ساختار صفحه، تعریف عناصر ساعت و نمایشگرها
• CSS3 — طراحی رابط کاربری، افکت‌های نئونی، انیمیشن و Responsive
• JavaScript — دریافت زمان سیستم، محاسبه زاویه عقربه‌ها و به‌روزرسانی DOM

هیچ فریم‌ورک یا کتابخانه خارجی در پروژه استفاده نشده است. نه React، نه Vue، نه Angular، نه Bootstrap و نه Tailwind. این موضوع دو مزیت مهم دارد: اول اینکه حجم پروژه بسیار پایین می‌ماند و بارگذاری آن سریع است، دوم اینکه توسعه‌دهنده می‌تواند بدون نیاز به یادگیری هیچ ابزار اضافه‌ای، منطق پروژه را درک و تغییر دهد.

فونت‌ها و منابع خارجی

پروژه از دو فونت آنلاین استفاده می‌کند که از سرویس Google Fonts بارگذاری می‌شوند:

• Orbitron — برای نمایشگر دیجیتال زمان (ظاهر تکنولوژیک)
• Vazirmatn — برای متن‌های فارسی و نمایش تاریخ

این فونت‌ها از طریق لینک در فایل index.html و همچنین دستور @import در فایل style.css بارگذاری می‌شوند. برای افرادی که در شبکه‌های محدود یا بدون دسترسی به Google Fonts کار می‌کنند، می‌توان به‌سادگی این وابستگی را حذف کرد: فونت‌های woff2 را دانلود کرده و با استفاده از @font-face به‌صورت لوکال تعریف کرد. این کار باعث می‌شود پروژه در حالت کاملاً آفلاین هم به‌درستی نمایش داده شود.

ساختار فایل‌های پروژه

پروژه از سه فایل اصلی تشکیل شده که هر کدام مسئول بخش مشخصی از عملکرد هستند:

• index.html — ساختار اصلی ساعت و رابط کاربری
• style.css — تمام استایل‌ها، رنگ‌ها، افکت‌ها و تنظیمات Responsive
• script.js — منطق زمان، محاسبه زوایا، و به‌روزرسانی عناصر صفحه

این تفکیک وظایف (Separation of Concerns) یکی از اصول مهم در توسعه وب است و باعث می‌شود پیدا کردن هر بخش از کد ساده باشد. اگر می‌خواهید ظاهر را تغییر دهید، فقط به style.css می‌روید. اگر می‌خواهید منطق را تغییر دهید، سراغ script.js می‌روید. اگر می‌خواهید ساختار صفحه را عوض کنید، index.html را ویرایش می‌کنید.

نحوه اجرای پروژه

اجرای پروژه در ساده‌ترین حالت ممکن انجام می‌شود:

1. سه فایل پروژه را در یک پوشه قرار دهید.
2. فایل index.html را با یک مرورگر مدرن باز کنید.
3. ساعت بلافاصله زمان سیستم شما را نمایش می‌دهد.

برای اجرای پروژه نیازی به نصب هیچ نرم‌افزار اضافه‌ای ندارید. نه نیاز به Node.js، نه Python، نه PHP و نه هیچ ابزار خط فرمان دیگری. همین سادگی، پروژه را برای کاربران مبتدی و کسانی که به‌تازگی با فرانت‌اند آشنا شده‌اند بسیار مناسب می‌کند.

اجرای پروژه روی هاست و سرویس‌های استاتیک

از آنجا که این پروژه یک Static Front-End است، می‌توانید آن را روی هر هاستی که از فایل‌های HTML، CSS و JavaScript پشتیبانی می‌کند قرار دهید. سرویس‌هایی مثل GitHub Pages، Netlify، Vercel، Cloudflare Pages و هر هاست معمولی اشتراکی برای میزبانی این پروژه کافی هستند.

فرآیند انتشار هم بسیار ساده است: کافی است فایل‌ها را از طریق FTP یا کنترل پنل هاست آپلود کنید و آدرس index.html را در مرورگر باز کنید. هیچ تنظیمات اضافه‌ای برای دیتابیس، PHP یا وب‌سرور مورد نیاز نیست.

نحوه کار با Date در JavaScript

شیء Date یکی از پرکاربردترین اشیاء در JavaScript است و برای کار با تاریخ و زمان استفاده می‌شود. با استفاده از این شیء می‌توان ساعت، دقیقه، ثانیه، روز، ماه و سال را به‌صورت جداگانه دریافت کرد. در این پروژه، از متدهای زیر استفاده شده است:

• getHours() — دریافت ساعت (۰ تا ۲۳)
• getMinutes() — دریافت دقیقه (۰ تا ۵۹)
• getSeconds() — دریافت ثانیه (۰ تا ۵۹)
• getDate() — دریافت روز ماه
• getMonth() — دریافت ماه (۰ تا ۱۱)
• getFullYear() — دریافت سال
• getDay() — دریافت روز هفته (۰ تا ۶)

برای یادگیری کار با تاریخ و زمان در JavaScript، این پروژه یک نمونه آموزشی عالی است. با خواندن کد script.js می‌توانید نحوه تعامل با Date را به‌طور کامل درک کنید.

نحوه محاسبه زاویه عقربه‌های ساعت

یکی از بخش‌های جذاب و آموزنده این پروژه، تبدیل زمان به زاویه چرخش عقربه‌ها است. در یک ساعت عقربه‌ای، هر عقربه موقعیت مشخصی بر اساس زمان فعلی دارد. قوانین ریاضی این تبدیل بسیار ساده هستند:

• عقربه ثانیه: در هر ثانیه، ۶ درجه حرکت می‌کند (۳۶۰ ÷ ۶۰)
• عقربه دقیقه: در هر دقیقه، ۶ درجه حرکت می‌کند (۳۶۰ ÷ ۶۰)
• عقربه ساعت: در هر ساعت، ۳۰ درجه حرکت می‌کند (۳۶۰ ÷ ۱۲)

برای طبیعی‌تر شدن حرکت عقربه ساعت، در این پروژه موقعیت عقربه ساعت تنها بر اساس عدد ساعت محاسبه نمی‌شود، بلکه دقیقه فعلی نیز در آن تأثیر می‌گذارد. مثلاً در ساعت ۳:۳۰، عقربه ساعت دقیقاً روی عدد ۳ نیست، بلکه در نیمه راه بین ۳ و ۴ قرار می‌گیرد. این جزئیات کوچک، تفاوت بین یک ساعت ساده و یک ساعت واقع‌گرا را ایجاد می‌کند.

پس از محاسبه زاویه، مقدار آن با استفاده از خصوصیت transform در CSS اعمال می‌شود. ترتیب rotate() در transform بسیار مهم است و اگر با translate ترکیب شود، باید دقت شود که مقدار translate حفظ شود، در غیر این صورت عقربه‌ها از مرکز ساعت خارج می‌شوند.

ارتباط JavaScript با CSS در پروژه

یکی از مفاهیم مهمی که در این پروژه به‌خوبی نمایش داده شده، نحوه ارتباط JavaScript با CSS است. JavaScript فقط برای محاسبه زمان استفاده نمی‌شود، بلکه نتیجه محاسبات را به‌صورت مستقیم روی استایل عناصر HTML اعمال می‌کند.

برای مثال، وقتی زاویه چرخش یک عقربه محاسبه می‌شود، کد به‌شکل زیر مقدار آن را روی عنصر اعمال می‌کند:

secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

این روش، پایه بسیاری از رابط‌های کاربری تعاملی در وب است. با یادگیری این مفهوم، می‌توانید انیمیشن‌ها، ترنزیشن‌ها و افکت‌های پویای دیگری هم بسازید.

افکت‌های نئونی و Glow با CSS

یکی از ویژگی‌های ظاهری متمایز این پروژه، استفاده از افکت‌های نئونی است. برای ایجاد این افکت‌ها از دو خصوصیت اصلی CSS استفاده شده است:

• box-shadow — برای ایجاد هاله نورانی دور عناصر مثل دایره ساعت، عقربه‌ها و نقطه مرکزی
• text-shadow — برای ایجاد هاله نورانی دور متن نمایشگر دیجیتال

این افکت‌ها به‌صورت کاملاً سبک پیاده‌سازی شده‌اند و هیچ فایل تصویری یا نرم‌افزار گرافیکی برای ساخت آن‌ها استفاده نشده است. به همین دلیل، پروژه حجم بسیار کمی دارد و بارگذاری آن سریع انجام می‌شود. علاوه بر این، تغییر رنگ افکت‌ها فقط با تغییر یک مقدار رنگ در CSS امکان‌پذیر است.

شخصی‌سازی و تغییر ظاهر ساعت

یکی از مزیت‌های مهم پروژه‌های مبتنی بر HTML، CSS و JavaScript این است که ظاهر آن‌ها به‌سادگی قابل تغییر است. برای این ساعت هم می‌توانید بدون تغییر منطق برنامه، ظاهر آن را کاملاً دگرگون کنید:

• تغییر رنگ پس‌زمینه از مشکی به هر رنگ دیگر
• تغییر رنگ عقربه‌ها (ساعت، دقیقه، ثانیه)
• تغییر شدت افکت Glow
• تغییر اندازه دایره ساعت
• تغییر فونت نمایشگر دیجیتال
• تغییر ضخامت عقربه‌ها
• افزودن گرادیان یا تصویر به پس‌زمینه
• تغییر موقعیت نمایشگر دیجیتال نسبت به ساعت

همه این تغییرات فقط با ویرایش فایل style.css انجام می‌شوند و نیازی به دانش عمیق برنامه‌نویسی ندارند. این ویژگی، پروژه را برای استفاده شخصی و حتی فروش نسخه‌های شخصی‌سازی‌شده جذاب می‌کند.

قابلیت‌های قابل توسعه در نسخه‌های آینده

پروژه به‌گونه‌ای ساختاردهی شده که توسعه آن در آینده ساده باشد. برخی از قابلیت‌هایی که می‌توانید خودتان اضافه کنید:

• نمایش تاریخ شمسی با استفاده از Intl.DateTimeFormat یا کتابخانه‌های جانبی
• حالت روشن و تاریک (Light/Dark Mode) با CSS Variables
• پشتیبانی از فرمت ۱۲ ساعته و نمایش AM/PM
• انتخاب منطقه زمانی و نمایش هم‌زمان چند شهر
• افزودن تایمر و کرنومتر با استفاده از ساختار مشابه
• سیستم زنگ هشدار (Alarm) با Notification API
• ذخیره تنظیمات کاربر در Local Storage
• حالت تمام‌صفحه (Fullscreen API)
• پنل تنظیمات برای انتخاب رنگ و فونت
• صدای تیک‌تاک با Web Audio API
• تبدیل پروژه به Progressive Web App

هر کدام از این قابلیت‌ها به‌تنهایی یک تمرین عالی برای یادگیری مفاهیم جدید فرانت‌اند هستند. می‌توانید پروژه را به‌عنوان نقطه شروع در نظر بگیرید و به‌تدریج قابلیت‌های جدید را به آن اضافه کنید.

پروژه‌ای مناسب برای یادگیری و تمرین

یادگیری برنامه‌نویسی بدون تمرین عملی کامل نیست. بسیاری از افرادی که تازه با JavaScript آشنا می‌شوند، به‌دنبال پروژه‌ای هستند که هم کوچک باشد و هم مفاهیم مختلفی را پوشش دهد. این ساعت دقیقاً همان پروژه است.

مفاهیمی که در این پروژه تمرین می‌شوند:

• انتخاب عناصر HTML با getElementById و querySelector
• تغییر محتوای متنی عناصر با textContent
• کار با شیء Date و متدهای مختلف آن
• فرمت‌دهی اعداد با padStart
• محاسبات ریاضی برای تبدیل زمان به زاویه
• تغییر خصوصیات CSS از طریق JavaScript
• استفاده از setInterval برای اجرای دوره‌ای توابع
• ساخت رابط کاربری واکنش‌گرا با Flexbox
• ساخت افکت‌های Glow با box-shadow و text-shadow

هر یک از این مفاهیم، پایه توسعه رابط‌های کاربری مدرن در وب است. با اتمام این پروژه، شما یک درک عملی از نحوه تعامل HTML، CSS و JavaScript پیدا می‌کنید.

سازگاری با مرورگرهای مختلف

پروژه با استفاده از قابلیت‌های استاندارد و پرکاربرد HTML5، CSS3 و JavaScript ساخته شده است. به همین دلیل، در تمام مرورگرهای مدرن از جمله Chrome، Firefox، Edge، Safari و Opera به‌درستی اجرا می‌شود. تمامی متدها و خصوصیاتی که استفاده شده‌اند، از پشتیبانی گسترده‌ای در مرورگرهای امروزی برخوردارند.

برای بهترین تجربه کاربری، پیشنهاد می‌شود از آخرین نسخه مرورگر خود استفاده کنید. پروژه روی دستگاه‌های موبایل با سیستم‌عامل اندروید و iOS هم تست شده و به‌درستی کار می‌کند.

حریم خصوصی و امنیت در پروژه سمت کاربر

از آنجا که تمام منطق این پروژه در مرورگر کاربر اجرا می‌شود، هیچ اطلاعاتی به سرور ارسال نمی‌شود. زمان و تاریخ به‌صورت مستقیم از سیستم کاربر خوانده می‌شوند و هیچ داده‌ای از کاربر جمع‌آوری یا ذخیره نمی‌شود. این ویژگی، پروژه را برای استفاده در محیط‌های حساس و پروژه‌هایی که به حریم خصوصی اهمیت می‌دهند مناسب می‌کند.

همچنین چون پروژه از هیچ سرویس خارجی یا API استفاده نمی‌کند، در محیط‌هایی که دسترسی به اینترنت محدود است یا کاربران نمی‌خواهند به سرویس‌های خارجی متصل شوند، همچنان به‌درستی کار می‌کند.

حجم پروژه و وابستگی‌ها

یکی از مهم‌ترین مزیت‌های این سورس، حجم کم و عدم وابستگی به کتابخانه‌های سنگین است. اکثر پروژه‌های مشابه از فونت‌های آنلاین سنگین، کتابخانه‌های تاریخ و زمان، یا فریم‌ورک‌های CSS استفاده می‌کنند که حجم پروژه را چند برابر می‌کنند. اما این پروژه به‌طور کامل با تکنولوژی‌های پایه ساخته شده و در نتیجه بسیار سبک و سریع است.

این ویژگی نه‌تنها به سرعت بارگذاری کمک می‌کند، بلکه انتقال پروژه به هاست‌های مختلف و مدیریت آن را هم ساده‌تر می‌کند. برای پروژه‌های آموزشی و نمونه‌کارها، سبکی و سادگی اهمیت زیادی دارد.

ساعت نئونی مناسب چه کسانی است؟

این سورس برای گروه‌های مختلفی از کاربران مفید است:

• توسعه‌دهندگان فرانت‌اند که به دنبال یک کامپوننت کوچک و مستقل برای اضافه کردن به پروژه‌های خود هستند.
• دانشجویان و دانش‌آموزان که در حال یادگیری HTML، CSS و JavaScript هستند و می‌خواهند یک پروژه واقعی را بررسی و تغییر دهند.
• برنامه‌نویسان مبتدی که به دنبال یک نمونه‌کار ساده و جذاب برای رزومه یا گیت‌هاب خود هستند.
• افراد علاقه‌مند به طراحی نئونی و Dark UI که می‌خواهند نمونه‌ای از این سبک طراحی را در پروژه‌های خود داشته باشند.
• صاحبان وب‌سایت‌های شخصی که می‌خواهند یک ساعت زیبا را در صفحه خود داشته باشند.
• مدرسان و آموزش‌دهندگان که به دنبال یک مثال عملی برای تدریس مفاهیم Date و setInterval در JavaScript هستند.

مشخصات فنی پروژه

• زبان‌های برنامه‌نویسی: HTML5، CSS3، JavaScript (Vanilla)
• نوع پروژه: Static Front-End
• نیاز به بک‌اند: ندارد
• نیاز به دیتابیس: ندارد
• وابستگی به کتابخانه خارجی: ندارد
• نوع نمایش زمان: دیجیتال و آنالوگ (هم‌زمان)
• به‌روزرسانی زمان: خودکار و لحظه‌ای
• نمایش تاریخ: بله
• طراحی واکنش‌گرا: بله
• رابط کاربری: Dark با افکت‌های نئونی
• اجرای منطق: کاملاً سمت کاربر
• نیاز به اینترنت برای عملکرد اصلی: ندارد
• سازگاری با مرورگرهای مدرن: بله

چرا این سورس را انتخاب کنید؟

اگر به دنبال یک ساعت آماده، سبک و قابل شخصی‌سازی برای پروژه خود هستید، این سورس می‌تواند گزینه مناسبی باشد. دلایل اصلی:

• کد ساده و خوانا برای افراد مبتدی تا حرفه‌ای
• بدون وابستگی به کتابخانه‌های سنگین و فریم‌ورک
• ظاهر مدرن و نئونی، مناسب پروژه‌های امروزی
• واکنش‌گرا و سازگار با همه دستگاه‌ها
• قابل اجرا روی هر هاست استاتیک
• قابل توسعه و شخصی‌سازی آسان
• نمایش هم‌زمان ساعت دیجیتال، آنالوگ و تاریخ
• مناسب برای تمرین، نمونه‌کار و پروژه‌های واقعی

جمع‌بندی

ساعت دیجیتال و آنالوگ نئونی یک پروژه سبک، کاربردی و قابل شخصی‌سازی است که با استفاده از HTML، CSS و JavaScript خالص ساخته شده است. ترکیب ساعت عقربه‌ای، نمایشگر دیجیتال، نمایش تاریخ و طراحی نئونی، ظاهری مدرن و متفاوت به این پروژه داده که آن را از نمونه‌های مشابه متمایز می‌کند.

مهم‌ترین مزیت این پروژه، سادگی و عدم وابستگی به هیچ ابزار خارجی است. تمام منطق برنامه در مرورگر اجرا می‌شود، نیازی به سرور یا دیتابیس ندارد، و می‌توان آن را با باز کردن فایل index.html به‌راحتی اجرا کرد. این ویژگی، پروژه را برای استفاده شخصی، آموزشی و نمونه‌کار مناسب می‌کند.

ساختار پروژه به‌گونه‌ای طراحی شده که توسعه آن در آینده ساده باشد. می‌توانید قابلیت‌هایی مثل تاریخ شمسی، حالت روشن و تاریک، فرمت ۱۲ ساعته، تایمر و کرنومتر، چند منطقه زمانی و پنل تنظیمات را به‌تدریج به آن اضافه کنید و یک ابزار کامل زمان بسازید.

اگر به دنبال یک سورس ساعت آماده، سبک و قابل توسعه برای پروژه خود هستید، یا می‌خواهید یک نمونه‌کار مناسب برای تمرین HTML، CSS و JavaScript داشته باشید، این پروژه می‌تواند نقطه شروع مناسبی باشد.