آیا ایجاد ساعت دیجیتال زیبای خود با فناوری های اولیه وب سرگرم کننده نیست؟ این آموزش نحوه ایجاد یک ساعت دیجیتال سه بعدی مصنوعی با HTML، CSS و جاوا اسکریپت Vanilla را پوشش می دهد.
بیا شروع کنیم!
ساختار HTML
ساختار HTML از یک محفظه مستطیل شکل با نمایش زمان در داخل تشکیل شده است. نمایش زمان حاوی عناصر ساعت، دقیقه و ثانیه فعلی خواهد بود.
1 |
<div class="rectangle-container"> |
2 |
<div class="rectangle"></div> |
3 |
<div class="time"> |
4 |
<p class="hours">12</p> |
5 |
<p class="separator">:</p> |
6 |
<p class="minutes">00</p> |
7 |
<p class="seconds"> </p> |
8 |
|
9 |
</div>
|
10 |
</div>
|
استایل دهی با CSS
ابتدا بیایید سبک های جهانی را تعریف کنیم:
1 |
:root { |
2 |
--background: #dde1e7; |
3 |
--rectangle-background: rgb(227, 222, 231); |
4 |
--shadow-light: rgba(255, 255, 255, 0.45); |
5 |
--shadow-medium: rgba(94, 104, 121, 0.3); |
6 |
--shadow-dark:rgba(0, 0, 0, 0.45); |
7 |
--darkBlue:rgb(0, 0, 45); |
8 |
--time-text-light: #dde1e7; |
9 |
--textColor:#fff; |
10 |
}
|
سپس، بدنه را استایل می‌دهیم تا مطمئن شویم همه عناصر ما در مرکز صفحه هستند.
1 |
body {
|
2 |
display: flex; |
3 |
justify-content: center; |
4 |
align-items: center; |
5 |
min-height: 100vh; |
6 |
background: var(--background); |
7 |
font-family: "Protest Guerrilla", sans-serif; |
8 |
} |
جلوه سه بعدی مصنوعی
گام بعدی ایجاد یک عنصر مستطیل شکل برای قرار دادن ساعت دیجیتال ما است. برای اطمینان از اینکه مستطیل مانند نسخه نمایشی مایل به نظر می رسد، استایل را اعمال می کنیم transform: skewY(-5deg);. همچنین یک سایه باکس به سمت راست و سایه‌های جعبه بالا و درونی از همه طرف اضافه می‌کنیم.
1 |
.rectangle {
|
2 |
position: relative; |
3 |
width: 340px; |
4 |
height: 120px; |
5 |
transform: skewY(-5deg); |
6 |
border-bottom-right-radius: 16px; |
7 |
box-shadow: inset -5px -5px 9px var(--shadow-light), |
8 |
inset 5px 5px 9px var(--shadow-light), |
9 |
0px 10px 10px -10px var(--shadow-dark), |
10 |
10px 0px 10px -10px var(--shadow-dark); |
11 |
} |
مرحله بعدی ایجاد توهم عمق در سمت چپ و بالای مستطیل است. ما این کار را با افزودن شبه عناصر به سمت چپ و بالا انجام خواهیم داد.
بیایید با سمت چپ شروع کنیم.
1 |
.rectangle::before { |
2 |
content: ""; |
3 |
position: absolute; |
4 |
top: 0; |
5 |
left: -30px; |
6 |
width: 30px; |
7 |
height: 100%; |
8 |
background: var(--background); |
9 |
transform-origin: right; |
10 |
transform: skewY(45deg); |
11 |
box-shadow: 0px 10px 10px -10px var(--shadow-dark), |
12 |
10px 0px 10px -10px var(--shadow-dark); |
13 |
}
|
با تعیین ارتفاع به صورت 100% می خواهیم المان تمام ارتفاع مستطیل را پوشش دهد. با تنظیم transform: skewY(45deg) ویژگی، این عنصر را 45 درجه در امتداد محور Y منحرف می کند و ظاهری مایل به آن می دهد.
را box-shadow ویژگی یک افکت سایه به این عنصر کج اضافه می کند و ظاهر سه بعدی آن را افزایش می دهد. می توانید با ارزش ها بازی کنید تا به ظاهر دلخواه برسید.
در این شبه المان یک سایه کادر نیز در سمت راست و پایین عنصر اضافه می کنیم. شعاع گسترش سایه روی یک مقدار منفی تنظیم می شود تا اطمینان حاصل شود که سایه به سمت داخل عنصر حرکت می کند.
ما همچنین از موقعیت‌یابی مطلق استفاده می‌کنیم تا مطمئن شویم که عنصر دقیقاً در سمت چپ مستطیل قرار می‌گیرد.
برای شبه عنصر برتر، موارد زیر را داریم:
1 |
.rectangle::after { |
2 |
content: ""; |
3 |
position: absolute; |
4 |
top: -30px; |
5 |
left: 0; |
6 |
width: 100%; |
7 |
height: 30px; |
8 |
background: rgb(227, 222, 231); |
9 |
transform-origin: bottom; |
10 |
transform: skewx(45deg); |
11 |
box-shadow: -5px -5px 9px var(--shadow-light), |
12 |
5px 5px 9px var(--shadow-medium); |
13 |
}
|
شبه عنصر تمام عرض مستطیل ها را کشیده و از موقعیت مطلق استفاده می کند تا اطمینان حاصل شود که هنگام کج شدن دقیقاً در بالای مستطیل قرار می گیرد. ما در حال اضافه کردن یک سایه باکس با حداقل تاری در همه طرف های این عنصر هستیم.
در این مرحله، چیزی شبیه به این داریم:
زمان
بیایید روی عنصر زمان تودرتو که شامل ساعت است کار کنیم.
1 |
.time { |
2 |
display: flex; |
3 |
font-weight: 900; |
4 |
justify-content: space-around; |
5 |
align-items: center; |
6 |
text-align: center; |
7 |
position: absolute; |
8 |
margin: 5px 25px 0 10px; |
9 |
width: 300px; |
10 |
height: 80px; |
11 |
top: 48.5%; |
12 |
left: 50%; |
13 |
transform: translate(-50%, -50%) skewY(-5deg); |
14 |
font-size: 40px; |
15 |
transform-origin: right; |
16 |
background-color: transparent; |
17 |
box-shadow: inset -5px -5px 9px var(--shadow-light), |
18 |
inset 5px 5px 9px var(--shadow-medium); |
19 |
}
|
از Flexbox برای اطمینان از تراز بودن عناصر فرزند در مرکز و توزیع یکنواخت در داخل والد استفاده کنید. فونت را روی پررنگ تنظیم کنید و عرض و ارتفاع را مشخص کنید تا مطمئن شوید که خارج از مستطیل سرریز نمی شود.
ما همچنین آن را کج می کنیم تا مطمئن شویم که محتوا مطابق شکل عنصر محصور است. جعبه-سایه داخلی در هر طرف توهم عمق ایجاد می کند.
قطعه نهایی سبک دادن به محتوا است.
1 |
.hours, |
2 |
.separator, |
3 |
.minutes, |
4 |
.seconds { |
5 |
background: var(--darkBlue); |
6 |
color: var(--textColor); |
7 |
margin-left: 10px; |
8 |
padding: 2px 10px; |
9 |
border-radius: 10px; |
10 |
font-weight: 900; |
11 |
}
|
12 |
.seconds { |
13 |
font-size: 15px; |
14 |
padding: 10px 4px; |
15 |
|
16 |
}
|
با انجام این مرحله آخر، مقداری حاشیه و بالشتک برای اطمینان از فاصله و خوانایی کافی و رنگ پس زمینه برای قابل مشاهده شدن متن اعمال کرده ایم.
عملکرد جاوا اسکریپت
بیایید از جاوا اسکریپت برای کاربردی کردن ساعت استفاده کنیم. یک تابع به نام ایجاد کنید updateTime().
1 |
function updateTime() { |
2 |
|
3 |
});
|
در داخل تابع، بیایید ابتدا تمام عناصری را که باید به روز شوند، دریافت می کنیم.
1 |
const hours = document.querySelector(".hours"); |
2 |
const minutes = document.querySelector(".minutes"); |
3 |
const seconds = document.querySelector(".seconds"); |
یک متغیر به نام ایجاد کنید currentTime برای ذخیره زمان فعلی زمان فعلی با استفاده از جدید بدست می آید Date() سازنده، همانطور که در زیر نشان داده شده است.
1 |
const currentTime = new Date(); |
ساخته شده در Date() شی چندین متد GET دارد که می‌توانیم برای اجزای خاص مانند سال جاری، ماه جاری، ساعت جاری، دقیقه جاری و غیره استفاده کنیم.
ما به روش های زیر نیاز داریم.
getHours(): ساعت جاری (0-23) را برمی گرداند.getMinutes(): دقیقه جاری (0-59) را برمی گرداند.getSeconds(): ثانیه های فعلی (0-59) را برمی گرداند.
بیایید ساعت، دقیقه و ثانیه فعلی را دریافت کنیم و عناصر مربوطه را به روز کنیم.
1 |
hours.innerHTML = currentTime.getHours().toString().padStart(2, "0"); |
2 |
minutes.innerHTML = currentTime.getMinutes().toString().padStart(2, "0"); |
3 |
seconds.innerHTML = currentTime.getSeconds().toString().padStart(2, "0"); |
به روز رسانی زمان
ساعت اکنون زمان فعلی را نشان می دهد، اما به روز نمی شود. برای به روز رسانی آن، ما از آن استفاده خواهیم کرد setInterval(). setInterval() یک روش داخلی است که یک تابع را پس از یک بازه زمانی خاص به روز می کند. در مورد ما، ما می خواهیم UpdateTime() عملکرد هر 1 ثانیه (1000 میلی ثانیه) به روز می شود.
1 |
setInterval(updateTime, 1000); |
و در اینجا نسخه ی نمایشی نهایی است!
نتیجه
این آموزش نحوه استفاده از CSS و جاوا اسکریپت برای ساخت یک ساعت دیجیتال سه بعدی واقعی را توضیح داده است. امیدواریم این الهام بخش برای ساخت اجزای پیشرفته تر و جذاب تر باشد.
