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

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

جلسه 1
آموزش ساخت اسلایدر با HTML و CSS (عکس | بلاگ)

آموزش ساخت اسلایدر با HTML و CSS (عکس | بلاگ)

جلسه 2

شما در حال مشاهده
جلسه 3 هستید

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

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

جلسه 3
نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

جلسه 4
ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

جلسه 5
مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

جلسه 6
ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

جلسه 7
ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

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

جلسه 8
ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

جلسه 9
پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

جلسه 10
آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

جلسه 11
افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

جلسه 12
آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

جلسه 13
ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

جلسه 14
آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

جلسه 15
آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

جلسه 16
ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

جلسه 17
آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

جلسه 18
آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

جلسه 19
آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

جلسه 20
ساخت باکس اطلاعات تماس در HTML و CSS (با هاور زیبا)

ساخت باکس اطلاعات تماس در HTML و CSS (با هاور زیبا)

جلسه 21
آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

جلسه 22
آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

جلسه 23
طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

جلسه 24
طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

جلسه 25
آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

جلسه 26
آموزش ساخت باکس قیمت گذاری با HTML و CSS

آموزش ساخت باکس قیمت گذاری با HTML و CSS

جلسه 27

مدرس دوره

نبی عبدی

زمان ویدیو

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: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 امتیاز)

دیدگاه و پرسش

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!