ساخت ساعت آنالوگ با HTML - علی برادر خدام خسروشاهی

سلام دوستان علی برادر خدام خسروشاهی هستم با یک آموزش دیگه !

آدرس اینستاگرام : instagram.com/alikay_h.official

امروز میخوایم با استفاده از برنامه نویسی تحت وب (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" نمایش داده شود.

ادامه استایل نویسی :

.spike { position: absolute; width: 8px; height: 1px; background: #fff9; line-height: 20px; transform-origin: 50%; z-index: 5; inset: 0; margin: auto; font-style: normal; transform: rotate(var(--rotate)) translateX(var(--dail-size));}

این کد CSS یک المان با نام ".spike" ایجاد می کند که یک چیزی به شکل یک نوک با طول 8 پیکسل و عرض 1 پیکسل است. این المان با استفاده از پوزیشن آبسولوت و با استفاده از ترانسفورم، در مرکز صفحه قرار می گیرد. ویژگی های دیگر این المان عبارتند از: - پس زمینه با رنگ سفید و شفافیت 9 درصد (با استفاده از کد "#fff9")، که به این معنی است که المان قابل رؤیت است اما نه به طور کامل. - خط بالا و پایین المان با ارتفاع 20 پیکسل و خطوط کاملاً عمودی هستند. - مبدأ ترانسفورم در مرکز المان (با استفاده از "transform-origin: 50%"). - عمق z-index برابر با 5، که به المان اجازه می دهد بر روی سایر المان ها قرار بگیرد. - درجه چرخش المان توسط متغیر "--rotate" تعیین می شود. - موقعیت افقی المان توسط متغیر "--dail-size" تعیین می شود. به طور خلاصه، این کد یک المان با شکل یک نوک با طول و عرض مشخص ایجاد می کند و با استفاده از ترانسفورم و پوزیشن آبسولوت، در مرکز صفحه قرار می گیرد.

.spike:nth-child(5n+1) {

box-shadow: -7px 0 #fff9;

}

در این کد، با استفاده از نوشتن ".spike:nth-child(5n+1)"، به المان هایی با کلاس "spike" که در رده 5n+1 قرار دارند (مانند المان اول، المان ششم، المان یازدهم و غیره)، سایه با طول -7 پیکسل و عرض 0 و با رنگ "#fff9" اعمال می شود.

ادامه پست بزودی قرار میگیرد. ...