ساخت ساعت با جاوا اسکریپت – دیجیتال و آنالوگ به زبان ساده

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

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

پیش نیاز ساخت ساعت با جاوا اسکریپت؟

به عنوان نوعی پیش‌نیاز برای درک بهتر فرایند کدنویسی ساخت ساعت با جاوا اسکریپت درک مقدماتی از «Html» ،«Css» و خود جاوا اسکریپت اهمیت بسیار زیادی دارد. در مطلب پیش‌رو ابتدا ۲ نوع ساعت آنالوگ با جاوا اسکریپت ساخته می‌شود و بعد از آن سعی خواهیم کرد یک ساعت دیجیتالی را نیز پیاده‌سازی کنیم. برای ساخت ساعت با جاوا اسکریپت در ابتدا به سه فایل با نام و فرمت‌های زیر نیاز است:

• «Index.html»
• «Style.css»
• «index.js»

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

ساخت ساعت آنالوگ با جاوا اسکریپت

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

مرحله ١. ایجاد طرح اولیه ساخت ساعت با جاوا اسکریپت

برای شروع ساخت ساعت آنالوگ با جاوا اسکریپت ابتدا باید ساختار پایه ساعت ایجاد شود که برای این کار از تگ div  در فایل Html به صورت زیر استفاده خواهد شد:

1<div class="clock">
2
3
4</div>

حال نوبت به اضافه کردن استایل به ساعت با استفاده از اعمال قواعد CSS است که باید این عمل در ابتدا به صورت زیر انجام بگیرد:

1.clock {
2  background: #ececec;
3  width: 300px;
4  height: 300px;
5  margin: 8% auto 0;
6  border-radius: 50%;
7  border: 14px solid #333;
8  position: relative;
9  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
10}

در کدهای CSS فوق ظاهر ساعت جاوا اسکریپتی به صورت زیر پیکربندی شده است:

• background : رنگ پس‌زمینه خاکستری روشن انتخاب شده است.
• ابعاد: عرض و ارتفاع ساعت هر دو روی ٣۰۰ پیکسل تنظیم شده است که ساعت را مربعی شکل می‌کند.
• margin : از حاشیه ٨ درصد در بالا و خودکار برای وسط استفاده شده است.
• Border radius : برای ایجاد شکل دایره‌ای، شعاع حاشیه روی ۵۰ درصد قرار داده شده است.
• border : حاشیه‌ای به رنگ زغالی تیره به اندازه ١۴ پیکسلی برای تعیین طرح کلی ساعت اضافه شده است.
• position : موقعیت به صورت نسبی تنظیم شده است که امکان قرارگیری عناصر در ساعت را فراهم می‌کند.
• box-shadow : نوعی جعبه به طرح کلی ساعت برای زیبایی بهتر ارائه شده است.

خروجی فعلی این ساعت جاوا اسکریپتی به صورت زیر است:

این ساختار و استایل به‌عنوان پایه‌ای برای ساعت جاوا اسکریپت مد نظر عمل می‌کند که می‌توان آن را به صورت دلخواه نیز سفارشی‌تر کرد.

فیلم آموزش برنامه نویسی جاوا اسکریپت در ادوبی انیمیت Adobe Animate در فرادرس

کلیک کنید

مرحله ٢. اضافه کردن تاریخ، عقربه‌ ها و خطوط شماره‌ گذاری ساعت

برای بهبود عملکرد و ظاهر ساعت آنالوگ در این مرحله عناصر و کلاس جدید ارائه خواهند شد و کد html آن به صورت زیر به‌روز می‌شود:

1<div>
2  <div class="info date"></div>
3  <div class="info day"></div>
4</div>
5<div class="dot"></div>
6<div>
7  <div class="hour-hand"></div>
8  <div class="minute-hand"></div>
9  <div class="second-hand"></div>
10</div>
11<div>
12  <span class="h3">3</span>
13  <span class="h6">6</span>
14  <span class="h9">9</span>
15  <span class="h12">12</span>
16</div>
17<div class="diallines"></div>

تشریح کد بالا به صورت زیر است:

• نمایش تاریخ و روز: دو عنصر div با کلاس‌های info date و info day برای نمایش تاریخ و روز هفته در صفحه ساعت اضافه می‌شوند.
• نقطه مرکزی: عنصر div با کلاس dot برای نمایش مرکز ساعت درج شده است.
• عقربه‌های ساعت: سه عنصر div با کلاس‌های hour-hand ، minute-hand و second-hand به ترتیب برای نمایش عقربه‌های ساعت، دقیقه و ثانیه ساعت معرفی شده‌اند.
• علائم زمان مهم: چهار عنصر span با کلاس‌های « h3, h6, h9 & h12 » برای علامت‌گذاری ساعت‌های کلیدی (٣، ۶، ۹ و ١٢) در صفحه ساعت گنجانده شده‌اند. می‌توان این علائم را بیشتر سفارشی کرد.
• شماره‌گیری خطوط: عنصر div با کلاس diallines برای ایجاد خطوط شماره‌گیری یا نشانگرها در سراسر صفحه ساعت اضافه می‌شود که موقعیت ساعت یا دقیقه را نشان می‌دهد.

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

مرحله ٣. اضافه کردن استایل به عناصر

در این مرحله از ساخت ساعت با جاوا اسکریپت باید استایل CSS روی عقربه‌ها و عناصر ساعت اعمال شوند تا از نظر بصری جذاب و کاربردی باشند. در این مرحله کد CSS به صورت زیر به‌روز می‌شود:

1.dot {
2  width: 14px;
3  height: 14px;
4  border-radius: 50%;
5  background: silvergrey; /* Changed background color to silvergrey */
6  top: 0;
7  left: 0;
8  right: 0;
9  bottom: 0;
10  margin: auto;
11  position: absolute;
12  z-index: 10; /* Added z-index to make the dot stand out */
13  box-shadow: 0 2px 4px -1px black; /* Added a subtle box shadow */
14}

تشریح کد بالا به صورت زیر است:

• عرض و ارتفاع نقطه روی ١۴ پیکسل قرار می‌گیرد و این کار مرکز ساعت را به عنصر دایره‌ای کوچک تبدیل می‌کند.
• شعاع حاشیه روی ۵۰ درصد تنظیم شده است تا شکل دایره‌ای به آن بدهد.
• رنگ پس‌زمینه را به رنگ خاکستری نقره‌ای تغییر داده می‌شود تا ظاهری زیبا داشته باشیم.
• موقعیت به عنوان absolute برای قرار دادن دقیق نقطه در مرکز ساعت تعریف شده است.
• یک z-index اضافه می‌شود تا نقطه مرکزی ساعت به صورت بصری برجسته شود.

خروجی این مرحله به صورت زیر است:

اضافه کردن استایل به عقربه ها

در این مرحله اکنون شماره و عقربه‌ها به ساعت اضافه خواهند شد. با استفاده از تگ span ، استایل مد نظر به شماره ساعت اضافه می‌شود. در این حالت نمایشگر روی inline-block و موقعیت روی absolute تنظیم خواهد شد. همچنین  اندازه فونت شماره ساعت روی ٢٢ پیکسل تنظیم شده است. همچنین z-index به اعداد اضافه شده است. از طرفی دیگر در این مرحله شماره‌های ساعت با استفاده از کلاس‌های تعریف شده h3, h6, h9 & h12 در صفحه ساعت قرار می‌گیرند.

قطعه کد CSS این بار به صورت زیر به‌روز می‌شود.

1.hour-hand {
2  position: absolute;
3  z-index: 5;
4  width: 4px;
5  height: 65px;
6  background: #333;
7  top: 79px;
8  transform-origin: 50% 72px;
9  left: 50%;
10  margin-left: -2px;
11  border-top-left-radius: 50%;
12  border-top-right-radius: 50%;
13}
14
15.minute-hand {
16  position: absolute;
17  z-index: 6;
18  width: 4px;
19  height: 100px;
20  background: #666;
21  top: 46px;
22  left: 50%;
23  margin-left: -2px;
24  border-top-left-radius: 50%;
25  border-top-right-radius: 50%;
26  transform-origin: 50% 105px;
27}
28
29.second-hand {
30  position: absolute;
31  z-index: 7;
32  width: 2px;
33  height: 120px;
34  background: gold;
35  top: 26px;
36  lefT: 50%;
37  margin-left: -1px;
38  border-top-left-radius: 50%;
39  border-top-right-radius: 50%;
40  transform-origin: 50% 125px;
41}
42
43span {
44  display: inline-block;
45  position: absolute;
46  color: #333;
47  font-size: 22px;
48  font-family: 'Poiret One';
49  font-weight: 700;
50  z-index: 4;
51}
52
53.h12 {
54  top: 30px;
55  left: 50%;
56  margin-left: -9px;
57}
58.h3 {
59  top: 140px;
60  right: 30px;
61}
62.h6 {
63  bottom: 30px;
64  left: 50%;
65  margin-left: -5px;
66}
67.h9 {
68  left: 32px;
69  top: 140px;
70}
71
72.diallines {
73  position: absolute;
74  z-index: 2;
75  width: 2px;
76  height: 15px;
77  background: #666;
78  left: 50%;
79  margin-left: -1px;
80  transform-origin: 50% 150px;
81}
82.diallines:nth-of-type(5n) {
83  position: absolute;
84  z-index: 2;
85  width: 4px;
86  height: 25px;
87  background: #666;
88  left: 50%;
89  margin-left: -1px;
90  transform-origin: 50% 150px;
91}

این بار خروجی به صورت زیر خواهد بود:

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

1.info {
2  position: absolute;
3  width: 120px;
4  height: 20px;
5  border-radius: 7px;
6  background: #ccc;
7  text-align: center;
8  line-height: 20px;
9  color: #000;
10  font-size: 11px;
11  top: 200px;
12  left: 50%;
13  margin-left: -60px;
14  font-family: "Poiret One";
15  font-weight: 700;
16  z-index: 3;
17  letter-spacing: 3px;
18  margin-left: -60px;
19  left: 50%;
20}
21.date {
22    top: 80px;
23  }
24.day {
25    top: 200px;
26}

مرحله ۴: فعال کردن ساعت آنالوگ با استفاده از جاوا اسکریپت

در این مرحله از ساخت ساعت با جاوا اسکریپت طراحی تکمیل و با استفاده از کدنویسی جاوا اسکریپت بخش عملکردی ساعت فعال خواهد شد. در این مرحله در درجه اول روی متحرک‌سازی عقربه‌های ساعت کار انجام می‌گیرد، برای این هدف ابتدا خطوط شماره‌گیری و عنصر ساعت با استفاده از document.getElementsByClassName() به صورت زیر انتخاب می‌شوند:

1var dialLines = document.getElementsByClassName('diallines');
2var clockEl = document.getElementsByClassName('clock')[0];

در مرحله بعد، از حلقه for در جاوا اسکریپت برای ایجاد خطوط شماره‌گیری و چرخاندن عقربه‌ها استفاده خواهد شد. حلقه مد نظر از ١ تا ۵٩ به ازای هر ۶۰ ثانیه (١ دقیقه) اجرا می‌شود. همچنین در این بخش عناصر div جدیدی با کلاس diallines ایجاد خواهد شد. علاوه بر این، نوعی ویژگی transform یا تبدیل نیز اعمال می‌شود تا هر شماره‌گذاری‌های مربوط به دقیقه‌ها را ۶ درجه بچرخاند تا به‌درستی در اطراف صفحه ساعت قرار بگیرند. قطعه کد مربوط به این بخش به صورت زیر است:

1for (var i = 1; i < 60; i++) {
2  clockEl.innerHTML += "<div class='diallines'></div>";
3  dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
4}

این حلقه به‌طور مؤثر نشانگرهای دقیقه (خطوط شماره مربوط به دقیقه) را در سراسر صفحه ساعت ایجاد می‌کند. حال تابعی به نام clock() ایجاد می‌شود تا به‌روزرسانی مداوم زمان و انیمیشن ساعت را مدیریت کند.

اکنون در این بخش از ساخت ساعت با جاوا اسکریپت، تابع clock() ایجاد می‌شود تا عملکرد ساعت و تاریخ ساعت آنالوگ را مدیریت کند که قطعه کد آن به صورت زیر است:

1function clock() {
2  var weekday = [
3        "Sunday",
4        "Monday",
5        "Tuesday",
6        "Wednesday",
7        "Thursday",
8        "Friday",
9        "Saturday"
10      ],
11      d = new Date(),
12      h = d.getHours(),
13      m = d.getMinutes(),
14      s = d.getSeconds(),
15      date = d.getDate(),
16      month = d.getMonth() + 1,
17      year = d.getFullYear(),

تشریح کد بالا به صورت زیر است:

• آرایه‌ای به نام weekday حاوی نام روزهای هفته در کد بالا تعریف شده است.
• شی نمونه Date برای بازیابی تاریخ و زمان فعلی ارائه شده است.
• از متدهای مختلفی مانند « getHours » ،« getMinutes » ،« getSeconds » ،« getDate » ،« getMonth » ،« getFullYear » و « getDay » برای استخراج اطلاعات مربوط به تاریخ و زمان استفاده شده است.
• از متغیرهای « h »، « m »، « s »، « date »، « month »، « year » و « d » برای اقدامات بعدی مانند به‌روزرسانی عقربه‌های ساعت، نمایش تاریخ یا نشان دادن روز هفته استفاده شده است. برای به‌روزرسانی مداوم ساعت، می‌توان تابع clock() را در فواصل زمانی منظم با استفاده از متد SetInterval در جاوا اسکریپت فراخوانی کرد. مانند مثال زیر:

1setInterval(clock, 1000); // Calls the clock function every 1000 milliseconds (1 second)

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

کد نهایی ساخت ساعت آنالوگ با جاوا اسکریپت

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

کد HTML پروژه به صورت زیر است:

1<div class="clock">
2  <div>
3    <div class="info date"></div>
4    <div class="info day"></div>
5  </div>
6  <div class="dot"></div>
7  <div>
8    <div class="hour-hand"></div>
9    <div class="minute-hand"></div>
10    <div class="second-hand"></div>
11  </div>
12  <div>
13    <span class="h3">3</span>
14    <span class="h6">6</span>
15    <span class="h9">9</span>
16    <span class="h12">12</span>
17  </div>
18  <div class="diallines"></div>
19</div>

کد CSS پروژه به صورت زیر است:

1.clock {
2  background: #ececec;
3  width: 300px;
4  height: 300px;
5  margin: 8% auto 0;
6  border-radius: 50%;
7  border: 14px solid #333;
8  position: relative;
9  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
10}
11
12.dot {
13  width: 14px;
14  height: 14px;
15  border-radius: 50%;
16  background: #ccc;
17  top: 0;
18  left: 0;
19  right: 0;
20  bottom: 0;
21  margin: auto;
22  position: absolute;
23  z-index: 10;
24  box-shadow: 0 2px 4px -1px black;
25}
26
27.hour-hand {
28  position: absolute;
29  z-index: 5;
30  width: 4px;
31  height: 65px;
32  background: #333;
33  top: 79px;
34  transform-origin: 50% 72px;
35  left: 50%;
36  margin-left: -2px;
37  border-top-left-radius: 50%;
38  border-top-right-radius: 50%;
39}
40
41.minute-hand {
42  position: absolute;
43  z-index: 6;
44  width: 4px;
45  height: 100px;
46  background: #666;
47  top: 46px;
48  left: 50%;
49  margin-left: -2px;
50  border-top-left-radius: 50%;
51  border-top-right-radius: 50%;
52  transform-origin: 50% 105px;
53}
54
55.second-hand {
56  position: absolute;
57  z-index: 7;
58  width: 2px;
59  height: 120px;
60  background: gold;
61  top: 26px;
62  lefT: 50%;
63  margin-left: -1px;
64  border-top-left-radius: 50%;
65  border-top-right-radius: 50%;
66  transform-origin: 50% 125px;
67}
68
69span {
70  display: inline-block;
71  position: absolute;
72  color: #333;
73  font-size: 22px;
74  font-family: 'Poiret One';
75  font-weight: 700;
76  z-index: 4;
77}
78
79.h12 {
80  top: 30px;
81  left: 50%;
82  margin-left: -9px;
83}
84.h3 {
85  top: 140px;
86  right: 30px;
87}
88.h6 {
89  bottom: 30px;
90  left: 50%;
91  margin-left: -5px;
92}
93.h9 {
94  left: 32px;
95  top: 140px;
96}
97
98.diallines {
99  position: absolute;
100  z-index: 2;
101  width: 2px;
102  height: 15px;
103  background: #666;
104  left: 50%;
105  margin-left: -1px;
106  transform-origin: 50% 150px;
107}
108.diallines:nth-of-type(5n) {
109  position: absolute;
110  z-index: 2;
111  width: 4px;
112  height: 25px;
113  background: #666;
114  left: 50%;
115  margin-left: -1px;
116  transform-origin: 50% 150px;
117}
118
119.info {
120  position: absolute;
121  width: 120px;
122  height: 20px;
123  border-radius: 7px;
124  background: #ccc;
125  text-align: center;
126  line-height: 20px;
127  color: #000;
128  font-size: 11px;
129  top: 200px;
130  left: 50%;
131  margin-left: -60px;
132  font-family: "Poiret One";
133  font-weight: 700;
134  z-index: 3;
135  letter-spacing: 3px;
136  margin-left: -60px;
137  left: 50%;
138}
139.date {
140    top: 80px;
141  }
142.day {
143    top: 200px;
144}

همچنین کد جاوا اسکریپت پروژه به صورت زیر است:

1var dialLines = document.getElementsByClassName('diallines');
2var clockEl = document.getElementsByClassName('clock')[0];
3
4for (var i = 1; i < 60; i++) {
5  clockEl.innerHTML += "<div class='diallines'></div>";
6  dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
7}
8
9function clock() {
10  var weekday = [
11        "Sunday",
12        "Monday",
13        "Tuesday",
14        "Wednesday",
15        "Thursday",
16        "Friday",
17        "Saturday"
18      ],
19      d = new Date(),
20      h = d.getHours(),
21      m = d.getMinutes(),
22      s = d.getSeconds(),
23      date = d.getDate(),
24      month = d.getMonth() + 1,
25      year = d.getFullYear(),
26           
27      hDeg = h * 30 + m * (360/720),
28      mDeg = m * 6 + s * (360/3600),
29      sDeg = s * 6,
30      
31      hEl = document.querySelector('.hour-hand'),
32      mEl = document.querySelector('.minute-hand'),
33      sEl = document.querySelector('.second-hand'),
34      dateEl = document.querySelector('.date'),
35      dayEl = document.querySelector('.day');
36  
37      var day = weekday[d.getDay()];
38  
39  if(month < 9) {
40    month = "0" + month;
41  }
42  
43  hEl.style.transform = "rotate("+hDeg+"deg)";
44  mEl.style.transform = "rotate("+mDeg+"deg)";
45  sEl.style.transform = "rotate("+sDeg+"deg)";
46  dateEl.innerHTML = date+"/"+month+"/"+year;
47  dayEl.innerHTML = day;
48}
49
50setInterval("clock()", 100);

خروجی نهایی این پروژه ساخت ساعت با جاوا اسکریپت به صورت تصویر زیر است:

نمونه ساعت آنالوگ با جاوا اسکریپت

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

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

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

قطعه کد HTML ساخت ساعت آنالوگ با جاوا اسکریپت به صورت زیر است:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<link rel="stylesheet" href="style.css">
5	<script src="index.js"></script>
6</head>
7<body>
8	<div id="clockContainer">
9		<div id="hour"></div>
10		<div id="minute"></div>
11		<div id="second"></div>
12	</div>
13</body>
14</html>

قطعه کد CSS این ساعت آنالوگی به صورت زیر است:

1#clockContainer {
2	position: relative;
3	margin: auto;
4	height: 40vw;
5	/*to make the height and width responsive*/
6	width: 40vw;
7	background: url(clock.png) no-repeat;
8	/*setting our background image*/
9	background-size: 100%;
10}
11
12#hour,
13#minute,
14#second {
15	position: absolute;
16	background: black;
17	border-radius: 10px;
18	transform-origin: bottom;
19}
20
21#hour {
22	width: 1.8%;
23	height: 25%;
24	top: 25%;
25	left: 48.85%;
26	opacity: 0.8;
27}
28
29#minute {
30	width: 1.6%;
31	height: 30%;
32	top: 19%;
33	left: 48.9%;
34	opacity: 0.8;
35}
36
37#second {
38	width: 1%;
39	height: 40%;
40	top: 9%;
41	left: 49.25%;
42	opacity: 0.8;
43}

همچنین قطعه کد جاوا اسکریپت ساعت آنالوگ مد نظر به صورت زیر است:

1setInterval(() => {
2	d = new Date(); //object of date()
3	hr = d.getHours();
4	min = d.getMinutes();
5	sec = d.getSeconds();
6	hr_rotation = 30 * hr + min / 2; //converting current time
7	min_rotation = 6 * min;
8	sec_rotation = 6 * sec;
9
10	hour.style.transform = `rotate(${hr_rotation}deg)`;
11	minute.style.transform = `rotate(${min_rotation}deg)`;
12	second.style.transform = `rotate(${sec_rotation}deg)`;
13}, 1000);

خروجی این ساعت آنالوگ ساخته شده با جاوا اسکریپت به صورت زیر است:

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

ساخت ساعت دیجیتال با جاوا اسکریپت

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

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در فرادرس

کلیک کنید

مرحله ١. طراحی صفحه وب

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

1body{
2    margin-top: 200px;
3    height: 100vh;
4    background: #2477b7;
5}

در کد CSS بالا، margin-top  به معنای حاشیه بالا روی ١۵۰ پیکسل قرار داده شده تا ساعت به صورت عمودی در مرکز صفحه وب قرار بگیرد. می‌توان این مقدار را برای تنظیم دقیق موقعیت تنظیم و آن را کرد. همچنین رنگ پس‌زمینه برای صفحه وب روی آبی ( #2477b7 ) تنظیم‌شده است. کد فوق در اصل طرح پایه ساعت دیجیتالی را تنظیم می‌کند. خروجی این مرحله به صورت زیر است:

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

مرحله ٢. ایجاد ساختار اصلی ساعت دیجیتالی

در این مرحله ساختار اولیه ساعت دیجیتال با استفاده از HTML تنظیم شده و با CSS استایل دهی خواهد شد. برای این هدف کادر مستطیلی ساده برای نمایش زمان ایجاد می‌کنیم. کدهای HTML و CSS برای این هدف در زیر آمده است. کد HTML این ساختار به صورت زیر خواهد بود:

1<div id="clockDisplay" class="clockStyle"></div>

در کدهای فوق، عنصر div  با شناسه clockDisplay و کلاس clockStyle ایجاد شده تا به عنوان کانتینر یا ظرف ساعت دیجیتال عمل کند. همچنین کد CSS برای اضافه کردن استایل به ساختار به صورت زیر است:

1#clockDisplay {
2    margin: 0px auto;
3    width: 400px;
4    background-color: #1E1E1E; /* Black background color */
5    border: 5px solid #ededee; /* White border */
6    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
7    height: 100px;
8    color: #2ed9f7; /* Text color */
9    padding-top: 30px;
10    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
11    font-size: 60px; /* Text size */
12    text-align: center;
13    letter-spacing: 2px;
14}

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

• width و height  ابعاد ساعت را مشخص می‌کنند.
• background-color رنگ پس‌زمینه کادر یا محفظه ساعت را روی سیاه ( #1E1E1E ) تنظیم خواهد کرد.
• border نوعی حاشیه سفید در تمام ساعات شبانه‌روز ایجاد می‌کند.
• box-shadow سایه‌ای ظریف به ساعت اضافه خواهد کرد.
• color رنگ متن را به صورت آبی روشن مشخص می‌کند ( #2ed9f7 ).
• padding-top تراز عمودی متن را تنظیم می‌کند.
• font-family نوع فونت‌ها را مشخص خواهد کرد.
• font-size اندازه متن را کنترل می‌کند (۶۰ پیکسل در این مورد).
• Text-align متن را به صورت افقی در مرکز قرار می‌دهد.
• letter-spacing فاصله بین کاراکترها را برای خوانایی بهتر اضافه می‌کند.

خروجی کدهای فوق به صورت تصویر زیر است:

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

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در ۱۵۰ دقیقه در فرادرس

کلیک کنید

مرحله ٣. کدنویسی جاوا اکسریپت ساعت دیجیتال

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

1// Get the current time from the user's device
2var currentTime = new Date();
3var h = currentTime.getHours();
4var m = currentTime.getMinutes();
5var s = currentTime.getSeconds();
6
7// Determine whether it's AM or PM
8var diem = "AM";
9if (h == 0) {
10    h = 12;
11} else if (h > 12) {
12    h = h - 12;
13    diem = "PM";
14}
15
16// Add leading zeros to hours, minutes, and seconds if needed
17if (h < 10) {
18    h = "0" + h;
19}
20if (m < 10) {
21    m = "0" + m;
22}
23if (s < 10) {
24    s = "0" + s;
25}
26
27// Get the clock container element
28var myClock = document.getElementById('clockDisplay');
29
30// Format the time and display it in the clock container
31myClock.textContent = h + ":" + m + ":" + s + " " + diem;
32
33// Update the clock every 1000 milliseconds (1 second)
34setTimeout(renderTime, 1000);
35
36function renderTime() {
37    // Get the current time again
38    var currentTime = new Date();
39    var h = currentTime.getHours();
40    var m = currentTime.getMinutes();
41    var s = currentTime.getSeconds();
42
43    // Determine whether it's AM or PM
44    var diem = "AM";
45    if (h == 0) {
46        h = 12;
47    } else if (h > 12) {
48        h = h - 12;
49        diem = "PM";
50    }
51
52    // Add leading zeros to hours, minutes, and seconds if needed
53    if (h < 10) {
54        h = "0" + h;
55    }
56    if (m < 10) {
57        m = "0" + m;
58    }
59    if (s < 10) {
60        s = "0" + s;
61    }
62
63    // Update the clock display
64    myClock.textContent = h + ":" + m + ":" + s + " " + diem;
65
66    // Set a timeout to update the clock again after 1000 milliseconds
67    setTimeout(renderTime, 1000);
68}

تشریح کد فوق به صورت زیر است:

دریافت زمان فعلی:

در کد جاوا اسکریپت فوق ابتدا با استفاده از متد new Date() زمان جاری دریافت و ساعت‌ها، دقیقه‌ها و ثانیه‌ها استخراج خواهند شد. همچنین تعیین خواهد شد که آیا زمان فعلی صبح است یا بعد از ظهر که این زمان با AM  یا PM تعیین می‌شود. همچنین اگر ساعت ۰ (نیمه‌شب) باشد آن را ١٢ صبح در نظر می‌گیریم. اگر رقم ساعت بزرگ‌تر از ١٢ باشد، مقدار ١٢ از آن کم خواهد شد تا زمان PM به دست آید. همچنین ارقام ساعت‌ها، دقیقه‌ها و ثانیه‌ها در کد بالا دو رقمی هستند. به عنوان مثال، به‌جای نشان دادن 9:5:3 ، به صورت 09:05:03 نمایش داده خواهد شد.

فیلم آموزش پروژه محور اچ تی ام ال و سی اس اس – پروژه های کاربردی طراحی وب با HTML و CSS در فرادرس

کلیک کنید

دسترسی به کادر یا محفظه ساعت:

در کد فوق عنصر HTML با شناسه clockDisplay موجود و در متغیری به نام myClock ذخیره شده است. در این رابطه از document.getElementById('clockDisplay') برای دریافت عنصر محفظه ساعت و به‌روزرسانی محتوای آن با زمان قالب‌بندی شده با استفاده از ویژگی textContent  استفاده خواهد شد. در واقع زمان فعلی با ساعت، دقیقه، ثانیه و «AM/PM» قالب‌بندی شده و متن نمایش‌دهنده ساعت در داخل محفظه یا کادر ساعت myClock به‌روزرسانی می‌شود.

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

همچنین در کد فوق از setTimeout برای فراخوانی تابع renderTime هر ١۰۰۰ میلی‌ثانیه (١ ثانیه) استفاده شده است تا به‌طور مداوم ساعت را به‌روزرسانی کرده و نوعی ساعت دیجیتال بی‌درنگ ایجاد شود. این کار در کدنویسی ساخت ساعت با جاوا اسکریپت به صورت طور مداوم زمان فعلی را نشان می‌دهد. خروجی نهایی قطعه بالا در ساخت ساعت دیجیتال با جاوا اسکریپت به صورت زیر است:

تا به این جا ما توانستیم که ساعت دیجیتالی خود را با موفقیت پیاده‌سازی کنیم.

سوالات متداول برای ساخت ساعت با جاوا اسکریپت

در این بخش از مطلب مجله فرادرس چند سو‌ال متداول در رابطه با ساخت ساعت با جاوا اسکریپت برای درک بهتر فرایند ساخت و پیاده‌سازی این پروژه جذاب ارائه خواهد شد.

چگونه ساعت دیجیتالی با جاوا اسکریپت ایجاد کنیم؟

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

چگونه می‌توان با استفاده از جاوا اسکریپت ساعت آنالوگ ساخت؟

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

فیلم آموزش کاربردی HTML5، CSS3 و jQuery در طراحی وب – بخش یکم در فرادرس

کلیک کنید

چگونه می‌توان زمان واقعی در ساعت دیجیتالی جاوا اسکریپتی را به‌ روز کرد؟

می‌توان از تابع «SetTimeout» یا «SetInterval» برای به‌روزرسانی مکرر زمان در ساعت دیجیتال خود استفاده کرد. این توابع به کاربر این امکان را می‌دهند که کد را در فواصل زمانی منظم مانند هر ثانیه اجرا کند.

 آیا می‌توان ویژگی‌های اضافی مانند نمایش تاریخ به ساعت دیجیتال یا آنالوگ اضافه کرد؟

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

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

از چه کتابخانه‌ها یا فریمورک‌‌هایی می‌توان برای ساده‌سازی ساخت ساعت با جاوا اسکریپت استفاده کرد؟

کتابخانه‌هایی مانند «Moment.js» یا «Date-fns» می‌توانند دست‌کاری تاریخ و زمان را در جاوا اسکریپت ساده کنند. همچنین برای این هدف می‌توان از فریم‌ورک‌های جاوا اسکریپت مانند «ری اکت» (React) یا «انگولار» (Angular) به منظور ساخت ساعت با جاوا اسکریپت استفاده کرد.

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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