مدرس دوره

نبی عبدی

زمان ویدیو

23:51 دقیقه

برو به دیگر جلسات

آموزش HTML و CSS

برای دانلود ویدیو

وارد شوید

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

منتشر شده در تاریخ : 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:[email protected]&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 - (1 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فروش ویژه نوروز... تا 85 درصد تخفیف روی تمامی دوره‌ها...تخفیف‌تو بگیر!
+
آموزش‌های ویدیویی جدید فقط در یوتیوب