ساخت ساعت عقربه ای با جاوا اسکریپت
مشاهدۀ پرفروش ترین ساعت هوشمند
“`html
در دنیای برنامه‌نویسی وب، جاوا اسکریپت یکی از زبان‌های اصلی برای ایجاد تعامل و دینامیک در صفحات وب است. در این مقاله، به بررسی چگونگی ساخت یک ساعت عقربه‌ای با استفاده از جاوا اسکریپت خواهیم پرداخت. این پروژه نه تنها به شما کمک می‌کند تا با اصول اولیه جاوا اسکریپت آشنا شوید، بلکه می‌تواند به عنوان یک پروژه کوچک و جالب برای یادگیری بیشتر باشد.
آشنایی با اجزای ساعت عقربه‌ای
ساعت عقربه‌ای به طور کلی شامل سه عقربه اصلی است: عقربه ساعت، عقربه دقیقه و عقربه ثانیه. هر یک از این عقربه‌ها می بایست به طور مستقل حرکت کنند و موقعیت آن‌ها می بایست بر اساس زمان واقعی تغییر کند. برای ساخت این ساعت، ما از HTML، CSS و جاوا اسکریپت استفاده خواهیم کرد.
اجزای اصلی ساعت عبارتند از:
- عقربه ساعت: این عقربه معمولاً کوتاه‌ترین و ضخیم‌ترین عقربه است که نشان‌دهنده ساعت فعلی است.
- عقربه دقیقه: این عقربه بلندتر از عقربه ساعت است و نشان‌دهنده دقیقه فعلی می‌باشد.
- عقربه ثانیه: این عقربه معمولاً نازک‌ترین و بلندترین عقربه است که برای نمایش ثانیه‌ها استفاده می‌شود.
برای طراحی این ساعت، ما ابتدا می بایست ساختار HTML را ایجاد کنیم و سپس با استفاده از CSS ظاهر آن را زیبا کنیم. در نهایت، با استفاده از جاوا اسکریپت، زمان واقعی را محاسبه کرده و عقربه‌ها را به حرکت درآوریم.
ایجاد ساختار HTML ساعت
برای شروع، ما به یک ساختار HTML ساده نیاز داریم که شامل یک دایره برای بدنه ساعت و سه خط برای عقربه‌ها باشد. این ساختار به صورت زیر خواهد بود:
“`html
“`
در این کد، ما یک دایره‌ای به نام “clock” داریم و سه عقربه که به ترتیب برای ساعت، دقیقه و ثانیه می باشند. حالا می بایست CSS را برای این عناصر بنویسیم.
با استفاده از CSS، می‌توانیم اندازه و رنگ عقربه‌ها و همچنین دایره ساعت را تعریف کنیم. به عنوان مثال:
“`css
.clock {
width: 200px;
height: 200px;
border: 10px solid black;
border-radius: 50%;
position: relative;
}
.hand {
position: absolute;
background: black;
transform-origin: bottom;
bottom: 50%;
left: 50%;
transform: translateX(-50%);
}
.hour-hand {
height: 50px;
width: 6px;
}
.minute-hand {
height: 70px;
width: 4px;
}
.second-hand {
height: 90px;
width: 2px;
background: red;
}
“`
حالا که ساختار HTML و CSS را ایجاد کرده‌ایم، نوبت به جاوا اسکریپت می‌رسد تا عقربه‌ها را به حرکت درآورد. ما با استفاده از تابع setInterval می‌توانیم هر ثانیه زمان را به‌روز کنیم و موقعیت عقربه‌ها را محاسبه کنیم.
حرکت عقربه‌ها با جاوا اسکریپت
برای حرکت دادن عقربه‌ها بر اساس زمان واقعی، ابتدا می بایست زمان فعلی را بدست آوریم. برای این کار می‌توانیم از شیء Date در جاوا اسکریپت استفاده کنیم. سپس با استفاده از این زمان، زاویه عقربه‌ها را محاسبه می‌کنیم.
“`javascript
function updateClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
const secondHand = document.querySelector(‘.second-hand’);
const minuteHand = document.querySelector(‘.minute-hand’);
const hourHand = document.querySelector(‘.hour-hand’);
const secondDegrees = ((seconds / 60) * 360) + 90; // +90 to offset the initial rotation
const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90; // +90 to offset the initial rotation
const hourDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90; // +90 to offset the initial rotation
secondHand.style.transform = `rotate(${secondDegrees}deg)`;
minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(updateClock, 1000);
“`
در این کد، ما با استفاده از تابع updateClock زمان فعلی را دریافت کرده و زاویه‌های لازم برای هر یک از عقربه‌ها را محاسبه می‌کنیم. سپس، با استفاده از CSS، این عقربه‌ها را به موقعیت‌های جدید خود منتقل می‌کنیم.
به این ترتیب، شما می‌توانید یک ساعت عقربه‌ای ساده بسازید که به صورت خودکار زمان را نشان می‌دهد. با استفاده از این پروژه، شما با بسیاری از مفاهیم پایه جاوا اسکریپت آشنا می‌شوید.
مشاهدۀ پرفروش ترین ساعت دیواری
نتیجه‌گیری
در این مقاله، ما به بررسی چگونگی ساخت یک ساعت عقربه‌ای با استفاده از جاوا اسکریپت پرداختیم. از ایجاد ساختار HTML و CSS گرفته تا استفاده از جاوا اسکریپت برای حرکت دادن عقربه‌ها، ما تمام مراحل را بررسی کردیم. این پروژه می‌تواند به عنوان یک نقطه شروع مناسب برای یادگیری بیشتر در زمینه وب‌سایت‌سازی و برنامه‌نویسی جاوا اسکریپت باشد.
امیدواریم که این مقاله برای شما مفید واقع شده باشد و شما بتوانید از آن برای یادگیری و توسعه مهارت‌های برنامه‌نویسی خود استفاده نمایید. با تمرین و پیاده‌سازی پروژه‌های مشابه، می‌توانید به یک برنامه‌نویس ماهر تبدیل شوید و در دنیای وب پیشرفت کنید.
جدول مقایسه عقربه‌ها
| نام عقربه | طول (px) | عرض (px) | رنگ |
|---|---|---|---|
| عقربه ساعت | 50 | 6 | سیاه |
| عقربه دقیقه | 70 | 4 | سیاه |
| عقربه ثانیه | 90 | 2 | قرمز |
در نهایت، ساخت یک ساعت عقربه‌ای با جاوا اسکریپت نه تنها به شما در یادگیری بیشتر کمک می‌کند، بلکه می‌تواند به عنوان یک پروژه جالب و سرگرم‌کننده در نظر گرفته شود. امیدواریم شما نیز تجربه‌ای خوب از این پروژه داشته باشید.
“`
