آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

منتشر شده در تاریخ : 31 تیر 1401

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

راهنمای مطالعه:

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

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

کدهای HTML ساعت دیجیتال

در زیر می‌توانید کدهای html مربوط به پروژه ساعت دیجیتال را مشاهده کنید.

<!DOCTYPE html>
<!-- Created By Navid Dev -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navid Dev - Digital Clock Javascript</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="clock">
      <div class="display"></div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

کدهای CSS ساعت دیجیتال

در زیر می‌توانید کدهای CSS مربوط به پروژه ساعت دیجیتال را مشاهده کنید.

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  display: grid;
  place-items: center;
  background: #131419;
  color: aqua;
}
.clock {
  background: #131419;
  height: 120px;
  text-align: center;
  padding: 0 30px;
  box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.05),
    3px 3px 7px rgba(255, 255, 255, 0.05);
}
.display {
  font-size: 80px;
  color: cyan;
  letter-spacing: 5px;
  font-family: 'Orbitron', sans-serif;
  display: flex;
}
.display p {
  width: 140px;
}
.display p:last-child {
  margin-left: 2rem;
}
@media screen and (max-width: 768px) {
  .display {
    font-size: 50px;
  }
  .display p {
    width: 90px;
  }
  .display p:last-child {
    margin-left: 1rem;
  }
}

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

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

setInterval(() => {
  const clock = document.querySelector('.display');

  let time = new Date();
  let sec = time.getSeconds();
  let min = time.getMinutes();
  let hr = time.getHours();

  let day = 'AM';
  if (hr > 12) {
    day = 'PM';
    hr = hr - 12;
  }
  if (hr == 0) {
    hr = 12;
  }
  if (sec < 10) {
    sec = '0' + sec;
  }
  if (min < 10) {
    min = '0' + min;
  }
  if (hr < 10) {
    hr = '0' + hr;
  }
  clock.innerHTML = `<p>${hr}</p>:<p>${min}</p>:<p>${sec}</p> <p>${day}</p>`;
}, 1000);

جمع بندی

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

4.5/5 - (2 امتیاز)

آموزش طراحی فرم لاگین با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS