ساخت ساعت آنالوگ Html + Css + Js

امروز میخوایم با استفاده از برنامه نویسی تحت وب (HTML , CSS , JS) ساعت آنالوگ بسازیم.

اول از همه سه تا فایل نیاز داریم بسازیم. یک فایل html و یک فایل css و یک فایل js و اونهارو بهم مربوط میکنیم.

و شروع میکنیم به کد نویسی به صورت زیر:

در این کد، یک عنصر second به عنوان کلاس ساعت تعریف شده است. درون این عنصر، چهار عنصر دیگر به عنوان دقیقه‌ها، ثانیه‌ها، دقیقه (با مقدار 44) و ساعت قرار دارند. با استفاده از CSS و تغییر سبک هر یک از این عناصر، می‌توانید ظاهر ساعت را تغییر دهید. برای مثال، با تغییر مقدار دقیقه به 30، مقدار دقیقه در ساعت به 30 تغییر خواهد کرد.

و شروع میکنیم به استایل دادن به سایتمون.

در این کد، یک عنصر با کلاس "clock" تعریف شده است که به عنوان قاب ساعت عمل می‌کند. از طریق استفاده از CSS، سبک و ظاهر ساعت قابل تغییر است. برای مثال، با تغییر مقادیر دقیقه و ساعت داخل عنصر "clock"، می‌توانید زمان نمایش داده شده در ساعت را تغییر دهید. همچنین، در این کد از یک فونت با نام "Comfortaa" استفاده شده است که از Google Fonts بارگیری می‌شود. این فونت برای نمایش متن‌ها در ساعت استفاده می‌شود.

• body, html { background: #000; margin: 0; height: 100vh; color: #fff; font-family: "Comfortaa", cursive;} این کد چیکار میکنه؟

این کد CSS است که تنظیماتی برای نمایش صفحه HTML دارد. این تنظیمات شامل تنظیمات پس زمینه، حاشیه، ارتفاع صفحه، رنگ متن و فونت متن است. این تنظیمات باعث می‌شود صفحه HTML با پس زمینه سیاه و متن سفید و با فونت "Comfortaa" نمایش داده شود.

.clock { --clock-size: 360px; width: var(--clock-size); height: var(--clock-size); position: fixed; inset: 0; margin: auto; border-radius: 50%;} این کد چیکار میکنه؟

این کد CSS تنظیماتی برای نمایش یک ساعت (clock) در صفحه HTML دارد. تنظیمات این کد عبارتند از: - تنظیم اندازه ساعت با استفاده از متغیر --clock-size که به مقدار 360 پیکسل تنظیم شده است. - تنظیم عرض و ارتفاع ساعت با استفاده از مقدار متغیر --clock-size. - تنظیم موقعیت ساعت با استفاده از position: fixed؛ به این صورت که ساعت در مرکز صفحه قرار می‌گیرد. - تنظیم حاشیه ساعت به صورت auto؛ به این معنی که ساعت به صورت خودکار حاشیه‌ای مناسب برای قرارگیری در مرکز صفحه پیدا می‌کند. - تنظیم شکل ساعت به صورت یک دایره با استفاده از border-radius: 50%؛ به این صورت که لبه‌های ساعت گرد می‌شوند. این تنظیمات باعث می‌شود ساعت با پس زمینه سیاه و متن سفید و با فونت "Comfortaa" نمایش داده شود.

برای شروع آموزش برنامه نویسی وب میتوانید از محصولات آموزشی آواسام شروع کنید.