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


      

        








    


      

        00

Hours


      

        00

Minutes


      

        00

Seconds


      

        AM


    

همچنین در بخش  بدنه کد divهایی برای نمایش روز، ماه، تاریخ، سال و ساعت دیجیتال تظیم شده است که

برای نمایش تاریخ و

برای نمایش جزئیات ساعت است.

همچنین  در بخش زیر پیوندی به فایل جاوا اسکریپت script.js ارائه شده است:

استایل دادن به ساعت دیجیتالی با CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "poppins", sans-serif;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background: #36454f;
  overflow: hidden;
  background: url("../img/bg3.jpg") no-repeat center center/cover;
}
h2 {
  font-size: 5rem;
  letter-spacing: 5px;
  margin: 1rem 0px;
  text-align: center;
  color: #fff;
}
.clock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.clock div {
  margin: 05px;
  position: relative;
}
.days p {
  background: #db347d;
  padding: 1rem 6rem;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
}
.clock div span {
  display: flex;
  width: 100%;
  height: 100px;
  background: #fff;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  padding: 4rem 3.5rem;
  font-weight: 800;
  border-radius: 04px;
}
.clock .text {
  font-size: 14px;
  height: 10px;
  padding: 1.5rem;
  letter-spacing: 2px;
  background: #3e57d0;
  color: #fff;
  font-weight: 600;
}
.clock #ampm {
  bottom: 0;
  position: absolute;
  width: 60px;
  height: 30px;
  font-size: 25px;
  padding: 1.5rem 3rem;
}

Google Font Import فونت‌های Poppins و Roboto را از فونت‌های Google به پروژه

ایمپورت می‌کند.

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap");

دقیقاً مانند پروژه اولی  box-sizing با تنظیم حاشیه‌ها، لایه‌ها و اندازه جعبه، نمایش ظاهری ثابت را برای ساعت ما تضمین می‌کند.

{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "poppins", sans-serif;
}

Body Styling ساعت دیجیتالی ما را با پس‌زمینه و سبک‌های فونت خاص در مرکز صفحه قرار می‌دهد:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background: #36454f;
  overflow: hidden;
  background: url("../img/bg3.jpg") no-repeat center center/cover;
}

Heading Styling هم ظاهر عنوان اصلی را مشخص می‌کند.

h2 {
  font-size: 5rem;
  letter-spacing: 5px;
  margin: 1rem 0px;
  text-align: center;
  color: #fff;
}

Clock Container Styling استایل هایی را برای کانتینر نگه‌دارنده ساعت به صورت زیر تنظیم می‌کند.

.clock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

همچنین طبق کد زیر، clock div برای هر عنصر ساعت، استایلی را تعریف می‌کند و از فاصله مناسب اطمینان می‌دهد.

.clock div {
  margin: 05px;
  position: relative;
}

در ادامه  .days p divهایی را که روز را با پس‌زمینه و ظاهر متنی خاص نشان می‌دهد، استایل دهی خواهد کرد و همچنین Clock Digit Styling ظاهر ارقام درون ساعت را مشخص می‌کند.

.days p {
  background: #db347d;
  padding: 1rem 6rem;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
}
.clock div span {
  display: flex;
  width: 100%;
  height: 100px;
  background: #fff;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  padding: 4rem 3.5rem;
  font-weight: 800;
  border-radius: 04p

همچنین Clock Label Styling برچسب‌ها را برای ساعت‌ها، دقیقه‌ها و ثانیه‌ها با پس‌زمینه‌ها و سبک‌های فونت خاص استایل می‌دهد.

.clock .text {
  font-size: 14px;
  height: 10px;
  padding: 1.5rem;
  letter-spacing: 2px;
  background: #3e57d0;
  color: #fff;
  font-weight: 600;
}

در نهایت AM/PM Indicator Styling استایل‌ها را برای نشانگر AM/PM به صورت زیر تنظیم می‌کند:

.clock #ampm {
  bottom: 0;
  position: absolute;
  width: 60px;
  height: 30px;
  font-size: 25px;
  padding: 1.5rem 3rem;
}

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

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

let hours = document.getElementById("hour");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
let ampm = document.getElementById("ampm");

function update_fun() {
  let h = new Date().getHours();
  let m = new Date().getMinutes();
  let s = new Date().getSeconds();
  let ampm = "AM";
  if (h > 12) {
    h = h - 12;
    ampm = "PM";
  }
  if (h < 10) {
    h = "0" + h;
  }
  if (m < 10) {
    m = "0" + m;
  }
  if (s < 10) {
    s = "0" + s;
  }
  hours.innerText = h;
  minutes.innerText = m;
  seconds.innerText = s;
  ampm, (innerText = ampm);
  let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  // Day
  let d = new Date();
  let dayName = days[d.getDay()];
  dy.innerText = dayName + ",";
  // Month
  let month = d.toLocaleString("default", { month: "long" });
  mt.innerText = month;
  // Date
  let date = d.getDate();
  dt.innerText = date + ",";
  // Year
  let year = d.getFullYear();
  yr.innerText = year;
  setInterval(() => {
    update_fun();
  }, 1000);
}
update_fun();

تشریح کد فوق در زیر آمده است:

قطعه کد زیر ارجاع به عناصر HTML با شناسه‌های خاص مانند ساعت، دقیقه، ثانیه و amppm را بازیابی می‌کند.

let hours = document.getElementById("hour");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
let ampm = document.getElementById("ampm");

برای به‌روزرسانی عملکرد ساعت تابع (updateClock)، برای محاسبه زمان جاری، تنظیم قالب 12 ساعته و به‌روزرسانی عناصر HTML با مقادیر فعلی به صورت زیر تعریف خواهیم کرد:

function update_fun() {
  let h = new Date().getHours();
  let m = new Date().getMinutes();
  let s = new Date().getSeconds();
  let ampm = "AM";
  if (h > 12) {
    h = h - 12;
    ampm = "PM";
  }
  if (h < 10) {
    h = "0" + h;
  }
  if (m < 10) {
    m = "0" + m;
  }
  if (s < 10) {
    s = "0" + s;
  }
  hours.innerText = h;
  minutes.innerText = m;
  seconds.innerText = s;
  ampm, (innerText = ampm);

همچنین قطعه کد زیر روز، ماه، تاریخ و سال جاری را بازیابی کرده و عناصر HTML مربوطه را به‌روز می‌کند.

  let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  // Day
  let d = new Date();
  let dayName = days[d.getDay()];
  dy.innerText = dayName + ",";
  // Month
  let month = d.toLocaleString("default", { month: "long" });
  mt.innerText = month;
  // Date
  let date = d.getDate();
  dt.innerText = date + ",";
  // Year
  let year = d.getFullYear();
  yr.innerText = year;

در نهایت SetInterval تابع updateClock را هر ثانیه فراخوانی می‌کند تا ساعت را به صورت پویا به‌روز نگه دارد.

  setInterval(() => {
    update_fun();
  }, 1000);
}

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

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

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

  
  
  
  




  
تمرین ساخت ساعت با جاوا اسکریپت - مجله سبز لرن


    
12 : 10 : 58 AM



  

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

@font-face {
  font-family: digital-7;
  src: url('digital-7.ttf');
}

:root {
  --light-color: #FFC312;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  height: 100vh;
  width: 100vw;
  background-color: #2C3A47;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  gap: 50px;
}
h2 {
  color: #f9ca24;
  font-size: 50px;
  font-weight: 500;
}

.frame {
  width: 600px;
  height: 300px;
  background-color: #111;
  border: 50px solid #f9ca24;
  padding: 10px;
  border-radius: 10px;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
  font-size: 80px;
  text-align: center;
  line-height: 180px;
}

.clock {
  font-family: digital-7;
  color: white;
  text-shadow: 0 0 20px var(--light-color);
  position: relative;
}

.clock::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--light-color);
  width: 100%;
  height: 100%;
  opacity: 0.1;
  filter: blur(40px);
}

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

const clock = document.querySelector('.clock');

function runClock() {
    var time = new Date();
    var hrs = time.getHours();
    var min = time.getMinutes();
    var sec = time.getSeconds();
    var txt = "AM";

    if (hrs > 12) {
        hrs = hrs - 12;
        txt = "PM";
    } else if (hrs == 0) {
        hrs = 12;
        txt = "AM";
    }
    hrs = hrs < 10 ? '0' + hrs : hrs;
    min = min < 10 ? '0' + min : min;
    sec = sec < 10 ? '0' + sec : sec;
    clock.innerHTML = `${hrs} : ${min} : ${sec} ${txt}`;
}

runClock();
setInterval(runClock, 1000);

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

آموزش جاوا اسکریپت با رویکردی پروژه محور

جاوا اسکریپت قابلیت‌های بسیار کاربردی و جذابی دارد که یکی از این قابلیت‌های

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

و

را ارائه کرده ایم که میتواند دست گرمی خوبی برای شما باشد.

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

برای بازار کار یکی از بهترین انتخاب‌ها برای شما خواهد بود. در این دوره شما به صورت اصولی و تخصصی با پروژه‌هایی آشنا خواهید که می‌تواند سطح مهارت شما از این زبان را بسیار بالا ببرد. همچنین شما می‌توانید با پشتیبانی این دوره فراتر از مباحث دوره رفته و به صورت تخصصی‌تر کار کنید.