JavaScript ile saat yapımı – basit dilde dijital ve analog

Javascript ile saat yapmanın önkoşulu?

JavaScript ile saat yapımının kodlama sürecini daha iyi anlamak için bir ön koşul olarak ” Html “, “Css” ve JavaScript’in kendisinin ön bilgisi çok önemlidir. Aşağıdaki yazımızda öncelikle JavaScript ile 2 tip analog saat yapılacak, daha sonra bir de dijital saat gerçekleştirmeye çalışacağız. JavaScript ile bir saat oluşturmak için aşağıdaki adlara ve formatlara sahip üç dosyaya ihtiyaç vardır:

• “Index.html”
• “Stil.css”
• “index.js”

Aşağıda bazı analog ve dijital saatler web programlamada üç önemli teknolojiyle (HTML, CSS ve JavaScript) uygulanmıştır .

JavaScript ile analog saat yapma

JavaScript ile analog saat yapmak için bir dizi adımdan geçmeniz gerekir ve her adımın kodlarını ilgili dosyalara yazarak, sonunda bu tür saati uygulamak mümkün olacaktır. İş kolaylığı açısından JavaScript ile saat yapma süreci adım adım anlatılacaktır.

Aşama 1. JavaScript ile saatin prototipinin oluşturulması

JavaScript ile analog saat yapmaya başlamak için öncelikle saatin temel yapısı oluşturulmalıdır; bu işlem etiketten yapılır. div  Html dosyasında şu şekilde kullanılacaktır:

<div class="clock">

</div>

Şimdi CSS kurallarını kullanarak saate stil eklemenin zamanı geldi; bu işlem şu şekilde yapılmalıdır:

.clock {
  background: #ececec;
  width: 300px;
  height: 300px;
  margin: 8% auto 0;
  border-radius: 50%;
  border: 14px solid #333;
  position: relative;
  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}

Yukarıdaki CSS kodlarında JavaScript saatinin görünümü şu şekilde yapılandırılmıştır:

• arka plan : Açık gri zemin rengi seçilir.
• Boyutlar: Saatin genişliği ve yüksekliği 300 piksele ayarlanmıştır, bu da saatin kare olmasını sağlar.
• marj : Üstte %8’lik bir marj kullanılır ve ortada otomatiktir.
• Sınır yarıçapı : Dairesel bir şekil oluşturmak için kenarlık yarıçapı %50’ye ayarlanır.
• sınır : Saatin ana hatlarını tanımlamak için 14 piksellik koyu kömür kenarlık eklendi.
• konum : Konum göreceli olarak ayarlanır, bu da öğelerin saate yerleştirilmesine olanak tanır.
• kutu gölgesi : Saatin genel tasarımına daha güzel bir görünüm kazandırmak için bir çeşit kutu sağlanmıştır.

Bu javascript saatinin mevcut çıktısı aşağıdaki gibidir:

Bu yapı ve stil, istenildiği gibi daha da özelleştirilebilen, söz konusu JavaScript saati için bir temel görevi görür.

Adım 2. Tarih, akrep ve saat numarası satırlarını ekleyin

Analog saatin performansını ve görünümünü iyileştirmek için bu adımda yeni öğeler ve sınıflar sunulacak ve html kodu aşağıdaki gibi güncellenecektir:

<div>
  <div class="info date"></div>
  <div class="info day"></div>
</div>
<div class="dot"></div>
<div>
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
</div>
<div>
  <span class="h3">3</span>
  <span class="h6">6</span>
  <span class="h9">9</span>
  <span class="h12">12</span>
</div>
<div class="diallines"></div>

Yukarıdaki kodun açıklaması şu şekildedir:

• Tarih ve günü görüntüle: iki öğe div sınıflarla bilgi tarihi Ve bilgi günü Saat kadranında haftanın tarihini ve gününü görüntülemek için eklenirler.
• Merkez Noktası: Öğe div Şık nokta Saatin merkezini göstermek için eklendi.
• Saat akrepleri: üç unsur div sınıflarla saat ibresi , Yelkovan Ve ikinci el Saatin sırasıyla akrep, dakika ve saniye ibrelerini gösterecek şekilde tanıtılmıştır.
• Önemli Zaman İşaretleri: Dört Unsur açıklık sınıflarla h3, h6, h9 ve h12 » Anahtar saatleri işaretlemek için (3, 6, 9 ve 12) saat kadranı yer almaktadır. Bu işaretler daha da özelleştirilebilir.
• Arama hatları: öğe div Şık arama hatları Saatin ön yüzünde saat veya dakika konumlarını gösteren arama çizgileri veya işaretler oluşturmak için eklenmiştir.

Bu öğeler, işleyen bir analog saat oluşturmak için gerekli bileşenleri sağlar. Saatiniz için istenen görünümü ve işlevi elde etmek üzere gerektiği şekilde özelleştirilebilirler.

Aşama 3. Öğelere stil ekleme

JavaScript ile saat oluşturmanın bu aşamasında saatin akrep ve yelkovanlarına ve elemanlarına CSS stilleri uygulanarak onları görsel olarak çekici ve pratik hale getirmek gerekir. Bu aşamada CSS kodu şu şekilde güncellenir:

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: silvergrey; /* Changed background color to silvergrey */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 10; /* Added z-index to make the dot stand out */
  box-shadow: 0 2px 4px -1px black; /* Added a subtle box shadow */
}

Yukarıdaki kodun açıklaması şu şekildedir:

• Noktanın genişliği ve yüksekliği 14 piksele ayarlanacak ve bu, saatin merkezini küçük bir dairesel eleman haline getirecek.
• Dairesel bir şekil vermek için kenarlık yarıçapı %50’ye ayarlanmıştır.
• Hoş bir görünüm için arka plan rengi gümüş grisi olarak değiştirildi.
• olarak konum kesinlikle Noktayı tam olarak saatin ortasına yerleştirmek için tanımlanır.
• Bir z-endeksi Saatin merkez noktasını görsel olarak vurgulamak için eklenmiştir.

Bu adımın çıktısı aşağıdaki gibidir:

Ellerinize stil katın

Bu aşamada artık saate sayılar ve akrepler eklenecek. etiketi kullanarak açıklık İstenilen stil saat numarasına eklenir. Bu durumda ekran açıktır. satır içi blok ve pozisyon kesinlikle ayarlanacaktır. Ayrıca saat numarasının yazı boyutu da 22 piksel olarak ayarlandı. Ayrıca z-endeksi sayılara eklendi. Öte yandan bu aşamada saat sayıları sınıflar kullanılarak tanımlanır. h3, h6, h9 ve h12 Saat yüzüne yerleştirilirler.

CSS kod pasajı aşağıdaki gibi güncellendi.

.hour-hand {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 65px;
  background: #333;
  top: 79px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.minute-hand {
  position: absolute;
  z-index: 6;
  width: 4px;
  height: 100px;
  background: #666;
  top: 46px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 105px;
}

.second-hand {
  position: absolute;
  z-index: 7;
  width: 2px;
  height: 120px;
  background: gold;
  top: 26px;
  lefT: 50%;
  margin-left: -1px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 125px;
}

span {
  display: inline-block;
  position: absolute;
  color: #333;
  font-size: 22px;
  font-family: 'Poiret One';
  font-weight: 700;
  z-index: 4;
}

.h12 {
  top: 30px;
  left: 50%;
  margin-left: -9px;
}
.h3 {
  top: 140px;
  right: 30px;
}
.h6 {
  bottom: 30px;
  left: 50%;
  margin-left: -5px;
}
.h9 {
  left: 32px;
  top: 140px;
}

.diallines {
  position: absolute;
  z-index: 2;
  width: 2px;
  height: 15px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}
.diallines:nth-of-type(5n) {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 25px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}

Bu sefer çıktı şu şekilde olacaktır:

Artık ekran, aşağıdaki kodla tam saati ve tarihi gösterecek şekilde tasarlanacaktır.

.info {
  position: absolute;
  width: 120px;
  height: 20px;
  border-radius: 7px;
  background: #ccc;
  text-align: center;
  line-height: 20px;
  color: #000;
  font-size: 11px;
  top: 200px;
  left: 50%;
  margin-left: -60px;
  font-family: "Poiret One";
  font-weight: 700;
  z-index: 3;
  letter-spacing: 3px;
  margin-left: -60px;
  left: 50%;
}
.date {
    top: 80px;
  }
.day {
    top: 200px;
}

4. Adım: Analog saati JavaScript kullanarak etkinleştirin

Saatin yapımının bu aşamasında JavaScript ile tasarım tamamlanacak ve saatin fonksiyonel kısmı JavaScript kodlaması kullanılarak aktif hale getirilecek. Bu aşamada öncelikle saatin akrep ve yelkovanının animasyonu üzerine çalışmalar yapılır, bu amaçla öncelikle kadran çizgileri ve saat elemanı kullanılır. document.getElementsByClassName() Aşağıdaki gibi seçilirler:

var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];

Daha sonra, çevirme çizgilerini oluşturmak ve ibreleri döndürmek için bir JavaScript for döngüsü kullanılacaktır. Söz konusu döngü her 60 saniyede (1 dakika) 1’den 59’a kadar çalışır. Ayrıca bu bölümdeki öğeler div Sınıfla yeni arama hatları yaratılacak. Ayrıca bir çeşit özellik dönüştürmek Veya herhangi bir dakika rakamının saat yüzüne doğru şekilde sığması için 6 derece döndürülmesi için de dönüşüm uygulanır. Bu bölüme ilişkin kod parçası aşağıdaki gibidir:

for (var i = 1; i < 60; i++) {
  clockEl.innerHTML += "<div class='diallines'></div>";
  dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}

Bu halka, saatin ön yüzünde etkili bir şekilde dakika işaretlerini (dakikalara karşılık gelen sayı çizgileri) oluşturur. Şimdi bir işlev çağrıldı saat() Sürekli zaman güncelleme ve saat animasyonunu yönetmek için yaratılmıştır.

function clock() {
  var weekday = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ],
      d = new Date(),
      h = d.getHours(),
      m = d.getMinutes(),
      s = d.getSeconds(),
      date = d.getDate(),
      month = d.getMonth() + 1,
      year = d.getFullYear(),

Yukarıdaki kodun açıklaması şu şekildedir:

• Adlı bir dizi Hafta içi Yukarıdaki kodda tanımlanan haftanın günlerinin adlarını içerir.
• Örnek nesne Tarih Güncel tarih ve saatin alınması sağlanmıştır.
• gibi çeşitli yöntemlerden getHours “, ” getMinutes “, ” getSeconds “, ” getDate “, ” getMonth “, ” getFullYear ” Ve ” getDay » tarih ve saate ilişkin bilgileri çıkarmak için kullanılır.
• değişkenlerden H “, ” M “, ” S “, ” tarih “, ” ay “, ” yıl ” Ve ” D » Saat ibrelerinin güncellenmesi, tarihin görüntülenmesi veya haftanın gününün gösterilmesi gibi diğer işlemler için kullanılır. Saati sürekli güncellemek için işlev saat()JavaScript’teki SetInterval yöntemi kullanılarak düzenli aralıklarla çağrılır . Aşağıdaki örnekte olduğu gibi:

setInterval(clock, 1000); // Calls the clock function every 1000 milliseconds (1 second)

Bu ayarlarla yerleşik analog saat, geçerli saati ve tarihi sürekli olarak görüntüler ve kişisel tercihlere uyacak şekilde özelleştirilebilir.

JavaScript ile analog saat yapmanın son kodu

Yukarıdaki projeye ilişkin JavaScript ile saat yapımına ilişkin son kodlar aşağıdaki gibidir:

Projenin HTML kodu aşağıdaki gibidir:

<div class="clock">
  <div>
    <div class="info date"></div>
    <div class="info day"></div>
  </div>
  <div class="dot"></div>
  <div>
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
  <div>
    <span class="h3">3</span>
    <span class="h6">6</span>
    <span class="h9">9</span>
    <span class="h12">12</span>
  </div>
  <div class="diallines"></div>
</div>

Projenin CSS kodu aşağıdaki gibidir:

.clock {
  background: #ececec;
  width: 300px;
  height: 300px;
  margin: 8% auto 0;
  border-radius: 50%;
  border: 14px solid #333;
  position: relative;
  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 10;
  box-shadow: 0 2px 4px -1px black;
}

.hour-hand {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 65px;
  background: #333;
  top: 79px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.minute-hand {
  position: absolute;
  z-index: 6;
  width: 4px;
  height: 100px;
  background: #666;
  top: 46px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 105px;
}

.second-hand {
  position: absolute;
  z-index: 7;
  width: 2px;
  height: 120px;
  background: gold;
  top: 26px;
  lefT: 50%;
  margin-left: -1px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 125px;
}

span {
  display: inline-block;
  position: absolute;
  color: #333;
  font-size: 22px;
  font-family: 'Poiret One';
  font-weight: 700;
  z-index: 4;
}

.h12 {
  top: 30px;
  left: 50%;
  margin-left: -9px;
}
.h3 {
  top: 140px;
  right: 30px;
}
.h6 {
  bottom: 30px;
  left: 50%;
  margin-left: -5px;
}
.h9 {
  left: 32px;
  top: 140px;
}

.diallines {
  position: absolute;
  z-index: 2;
  width: 2px;
  height: 15px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}
.diallines:nth-of-type(5n) {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 25px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}

.info {
  position: absolute;
  width: 120px;
  height: 20px;
  border-radius: 7px;
  background: #ccc;
  text-align: center;
  line-height: 20px;
  color: #000;
  font-size: 11px;
  top: 200px;
  left: 50%;
  margin-left: -60px;
  font-family: "Poiret One";
  font-weight: 700;
  z-index: 3;
  letter-spacing: 3px;
  margin-left: -60px;
  left: 50%;
}
.date {
    top: 80px;
  }
.day {
    top: 200px;
}

Ayrıca projenin JavaScript kodu da aşağıdaki gibidir:

var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];

for (var i = 1; i < 60; i++) {
  clockEl.innerHTML += "<div class='diallines'></div>";
  dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}

function clock() {
  var weekday = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ],
      d = new Date(),
      h = d.getHours(),
      m = d.getMinutes(),
      s = d.getSeconds(),
      date = d.getDate(),
      month = d.getMonth() + 1,
      year = d.getFullYear(),
           
      hDeg = h * 30 + m * (360/720),
      mDeg = m * 6 + s * (360/3600),
      sDeg = s * 6,
      
      hEl = document.querySelector('.hour-hand'),
      mEl = document.querySelector('.minute-hand'),
      sEl = document.querySelector('.second-hand'),
      dateEl = document.querySelector('.date'),
      dayEl = document.querySelector('.day');
  
      var day = weekday[d.getDay()];
  
  if(month < 9) {
    month = "0" + month;
  }
  
  hEl.style.transform = "rotate("+hDeg+"deg)";
  mEl.style.transform = "rotate("+mDeg+"deg)";
  sEl.style.transform = "rotate("+sDeg+"deg)";
  dateEl.innerHTML = date+"/"+month+"/"+year;
  dayEl.innerHTML = day;
}

setInterval("clock()", 100);

JavaScript ile bu saat yapımı projesinin son çıktısı aşağıda gösterildiği gibidir:

Javascript ile analog saat örneği

Bu bölümde JavaScript’ten başka bir analog saat yapımı ile ilgili kod parçası sunulacaktır. Bu saati yapmanın önkoşulları, bu saati yapma adımları aşağıda verilen temel HTML, CSS ve JavaScript bilgisine sahip olmaktır:

• İlgili dosyaların oluşturulması: İlk adımda üç adet HTML, CSS ve JavaScript dosyası oluşturulmalıdır. Ayrıca bu yaklaşımda saatin arka planı olarak kullanılacak uygun bir saat görseline ihtiyaç vardır.
• HTML dosyasının oluşturulması: Bu dosya, web sayfasının temel yapısını sağlar ve saat gövdesi ile saniye, dakika ve akrep için tanımlayıcıları içerir.
• CSS dosyası oluşturma: Bu dosya saate stil vermek ve onu görsel olarak çekici hale getirmek için kullanılır. İlgili stil, saati web sayfasının ortasına yerleştirir.
• Analog saat yapmak için JavaScript kodu: Saat yapmak için kullanılan JavaScript kodu, saat ibrelerini döndürme mantığını içerir ve önce HTML’den saat, dakika ve saniye öğelerini seçer. Bu kod aynı zamanda nesneden geçerli saati de alır Tarih kullanımlar JavaScript tarafından sağlanır ve geçerli saniyeleri, dakikaları ve saatleri görüntüler. JavaScript kodu aynı zamanda saat ibrelerini güncel zamana göre sürekli olarak güncelleyerek gerçek zamanlı bir analog saat oluşturur.

Yukarıdaki adımları takip ederek kişisel kullanımınız için pratik ve çekici bir analog saat yapabilirsiniz. Bu örnekte, üç HTML, CSS ve JavaScript dosyası için JavaScript ile saat oluşturmaya yönelik kod pasajı aşağıya yerleştirilmiştir.

JavaScript ile analog saat oluşturmaya yönelik HTML kodunun parçası aşağıdaki gibidir:

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="style.css">
	<script src="index.js"></script>
</head>
<body>
	<div id="clockContainer">
		<div id="hour"></div>
		<div id="minute"></div>
		<div id="second"></div>
	</div>
</body>
</html>

Bu analog saatin CSS kod parçası aşağıdaki gibidir:

#clockContainer {
	position: relative;
	margin: auto;
	height: 40vw;
	/*to make the height and width responsive*/
	width: 40vw;
	background: url(clock.png) no-repeat;
	/*setting our background image*/
	background-size: 100%;
}

#hour,
#minute,
#second {
	position: absolute;
	background: black;
	border-radius: 10px;
	transform-origin: bottom;
}

#hour {
	width: 1.8%;
	height: 25%;
	top: 25%;
	left: 48.85%;
	opacity: 0.8;
}

#minute {
	width: 1.6%;
	height: 30%;
	top: 19%;
	left: 48.9%;
	opacity: 0.8;
}

#second {
	width: 1%;
	height: 40%;
	top: 9%;
	left: 49.25%;
	opacity: 0.8;
}

Ayrıca söz konusu analog saatin JavaScript kod parçası da şu şekilde:

setInterval(() => {
	d = new Date(); //object of date()
	hr = d.getHours();
	min = d.getMinutes();
	sec = d.getSeconds();
	hr_rotation = 30 * hr + min / 2; //converting current time
	min_rotation = 6 * min;
	sec_rotation = 6 * sec;

	hour.style.transform = `rotate(${hr_rotation}deg)`;
	minute.style.transform = `rotate(${min_rotation}deg)`;
	second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000);

JavaScript ile yapılan bu analog saatin çıktısı aşağıdaki gibidir:

Yukarıdaki JavaScript ile saat yapımı projesi örneğinde yapım süreci ilk örneğe benzer olduğu için işin detaylarına girmedik, detayları girmeyi kullanıcıya bırakacağız. Bir sonraki adımda dijital saati JavaScript ile uygulayacağız.

JavaScript ile dijital saat yapma

JavaScript ile saat nasıl yapılır eğitimimizin bu bölümünde bu sefer dijital saat uygulaması yapılacaktır. Dijital saat yapma süreci, JavaScript’te analog saat yapmaktan biraz farklıdır. Daha sonra adım adım dijital saatin nasıl uygulanacağı anlatılacaktır.

Aşama 1. Web sayfası tasarımı

JavaScript kullanarak dijital saat yapmak için öncelikle web sayfasını tasarlayarak başlıyoruz. Bu adımda, web sayfasını stillendirmek ve saati sayfanın ortasına mavi bir arka planla yerleştirmek için CSS kullanılacaktır; kodu aşağıdaki gibidir:

body{
    margin-top: 200px;
    height: 100vh;
    background: #2477b7;
}

Yukarıdaki CSS kodunda, kenar boşluğu  Yani saatin web sayfasının ortasına dikey olarak yerleştirilmesi için üst kenarlık 150 piksele ayarlanmıştır. Bu değer, konuma ince ayar yapmak için ayarlanabilir. Ayrıca web sayfasının arka plan rengini mavi olarak ayarlayın ( #2477b7 ) ayarlandı. Yukarıdaki kod temel olarak dijital saatin temel düzenini ayarlar. Bu adımın çıktısı aşağıdaki gibidir:

Sonraki adımlarda temel yapı olarak HTML, saatin pratik hale getirilmesi için ise JavaScript kullanılacaktır.

Adım 2. Dijital saatin ana yapısının oluşturulması

Bu adımda dijital saatin temel yapısı HTML kullanılarak belirlenecek ve CSS ile stillendirilecektir. Bu amaçla zamanı gösterecek basit bir dikdörtgen kutu oluşturuyoruz. Bu amaca yönelik HTML ve CSS kodunu aşağıda bulabilirsiniz. Bu yapının HTML kodu aşağıdaki gibi olacaktır:

<div id="clockDisplay" class="clockStyle"></div>

Yukarıdaki kodlarda eleman div  kimlikli saat ekranı ve sınıf saat stili Dijital saat kabı görevi görecek şekilde tasarlandı. Ayrıca yapıya stil eklemek için CSS kodu aşağıdaki gibidir:

#clockDisplay {
    margin: 0px auto;
    width: 400px;
    background-color: #1E1E1E; /* Black background color */
    border: 5px solid #ededee; /* White border */
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
    height: 100px;
    color: #2ed9f7; /* Text color */
    padding-top: 30px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 60px; /* Text size */
    text-align: center;
    letter-spacing: 2px;
}

JavaScript ile saat yapımında stil oluşturmaya yönelik çeşitli CSS özellikleri aşağıdaki gibi ayarlanır:

• Genişlik Ve yükseklik  Saatin boyutlarını belirlerler.
• arka plan rengi Saat kasasının arka plan rengini siyah olarak ayarlayın ( #1E1E1E ) ayarlayacaktır.
• sınır Günün ve gecenin her saatinde bir çeşit beyaz sınır oluşturur.
• kutu gölgesi Saate ince bir gölge katacaktır.
• renk Metin rengini açık maviye ayarlar ( #2ed9f7 ).
• dolgulu üst Metnin dikey hizalamasını ayarlar.
• font ailesi Yazı tiplerini belirleyecektir.
• yazı Boyutu Metnin boyutunu kontrol eder (bu durumda 60px).
• Metin hizalama Metni yatay olarak ortalar.
• harf boşluğu Daha iyi okunabilirlik için karakterler arasına boşluk ekler.

Yukarıdaki kodların çıktısı aşağıdaki gibidir:

Yukarıdaki CSS kodu dijital saatin ana stilini oluşturur. Sonraki adımlarda, zamanı gerçek zamanlı olarak güncelleyerek işlevsel hale getirmek için JavaScript’i kullanacağız.

Aşama 3. Dijital saat javascript kodlaması

JavaScript ile saat yapımının bu aşamasında sıra dijital saati pratik hale getirmeye gelecektir. Bu amaçla JavaScript kodlamasıyla başlamamız gerekiyor. Amaçlanan dijital saati yapmak için kullanılan javascript kodunun parçası aşağıdaki gibidir:

// Get the current time from the user's device
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();

// Determine whether it's AM or PM
var diem = "AM";
if (h == 0) {
    h = 12;
} else if (h > 12) {
    h = h - 12;
    diem = "PM";
}

// Add leading zeros to hours, minutes, and seconds if needed
if (h < 10) {
    h = "0" + h;
}
if (m < 10) {
    m = "0" + m;
}
if (s < 10) {
    s = "0" + s;
}

// Get the clock container element
var myClock = document.getElementById('clockDisplay');

// Format the time and display it in the clock container
myClock.textContent = h + ":" + m + ":" + s + " " + diem;

// Update the clock every 1000 milliseconds (1 second)
setTimeout(renderTime, 1000);

function renderTime() {
    // Get the current time again
    var currentTime = new Date();
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    // Determine whether it's AM or PM
    var diem = "AM";
    if (h == 0) {
        h = 12;
    } else if (h > 12) {
        h = h - 12;
        diem = "PM";
    }

    // Add leading zeros to hours, minutes, and seconds if needed
    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if (s < 10) {
        s = "0" + s;
    }

    // Update the clock display
    myClock.textContent = h + ":" + m + ":" + s + " " + diem;

    // Set a timeout to update the clock again after 1000 milliseconds
    setTimeout(renderTime, 1000);
}

Yukarıdaki kodun açıklaması şu şekildedir:

Geçerli saati alın:

Yukarıdaki JavaScript kodunda ilk olarak yöntemi kullanarak yeni tarih() Güncel saat alınacak ve saat, dakika ve saniyeler çıkartılacaktır. Ayrıca mevcut saatin sabah mı yoksa öğleden sonra mı olduğunu da belirleyecektir. sabah  Veya ÖĞLEDEN SONRA Azimli. Ayrıca saat 0 (gece yarısı) ise 12:00 olarak kabul ederiz. Saat hanesi 12’den büyükse saate kadar 12 değeri bundan çıkarılır. ÖĞLEDEN SONRA elde edilmek Ayrıca yukarıdaki kodda saat, dakika ve saniye rakamları iki hanelidir. Örneğin göstermek yerine 9:5:3 , gibi 09:05:03 görüntülenecektir.

Saat kasasına erişim:

Yukarıdaki kodda kimliği olan HTML öğesi saat ekranı mevcut ve adı verilen bir değişkende saatim kaydedildi. Bu bakımdan itibaren document.getElementById(‘clockDisplay’) Zaman kabı öğesini almak ve içeriğini, özelliği kullanarak biçimlendirilmiş zamanla güncellemek için Metin içeriği  kullanılacak. Aslında geçerli saat, saat, dakika, saniye ve “AM/PM” ile biçimlendirilmiştir ve saat kasası veya çerçevesi içindeki saat görüntüleme metni. saatim Güncellenecektir.

Sürekli zaman güncellemesi:

Ayrıca yukarıdaki kodda setTimeout Fonksiyonu çağırmak için renderTime Her 1000 milisaniyede (1 saniye), saati sürekli olarak güncellemek için kullanılır ve bir tür gerçek zamanlı dijital saat oluşturulur. Bu, geçerli saati sürekli olarak göstermek için saatin JavaScript ile kodlanmasında işe yarar. Yukarıdaki parçanın JavaScript ile dijital saat yapımında son çıktısı aşağıdaki gibidir:

Şu ana kadar dijital saatimizi başarıyla uyguladık.

JavaScript ile saat yapımına ilişkin sık sorulan sorular

bu ilginç projenin yapım ve uygulama sürecinin daha iyi anlaşılması için JavaScript ile saat yapımına ilişkin sık sorulan bazı sorular sunulacaktır.

Javascript ile dijital saat nasıl oluşturulur?

JavaScript’te dijital saat yapmak için, geçerli saati almak, biçimlendirmek ve ardından saati düzenli olarak güncellemek için JavaScript’teki Date nesnesini kullanabilirsiniz. Ayrıca saati HTML ve CSS’de görüntülemek ve şekillendirmek için. Temel olarak, bir dijital saat genellikle yapı için HTML’ye, stil için CSS’ye ve saati işlevsel hale getirmek için JavaScript’e ihtiyaç duyar. HTML saat kutusunu sağlar, CSS saate stil verir ve JavaScript saati güncelleyip görüntüler.

Javascript kullanarak analog saat nasıl yapılır?

Analog saat oluşturmak, saat ibrelerinin sürüklenmesini ve geçerli saate göre döndürülmesini içerir. Bu hedefe ulaşmak için JavaScript ile birlikte “HTML5” veya “SVG”yi kullanabilirsiniz. CSS stillerini uygulayarak dijital saatin görünümünü de özelleştirebilirsiniz. Öte yandan yazı tipini, rengini, boyutunu ve konumunu tasarım tercihlerinize uyacak şekilde değiştirebilirsiniz.

Javascript dijital saatinde gerçek zaman nasıl güncellenir?

Dijital saatinizdeki saati sık sık güncellemek için SetTimeout veya SetInterval fonksiyonunu kullanabilirsiniz. Bu işlevler kullanıcının saniye başı gibi düzenli aralıklarla kod çalıştırmasına olanak tanır.

Evet, tarih görüntüleme veya saat formatı seçenekleri gibi özellikler eklenerek dijital saati özelleştirmek mümkün ve bu konu bu makalenin ilk örneğinde pratik olarak sunuldu. JavaScript, kullanıcının saat ve tarihin çeşitli yönlerini değiştirmesine olanak tanır.

JavaScript ile saat oluşturmayı basitleştirmek için hangi kitaplıklar veya çerçeveler kullanılabilir?

“Moment.js” veya “Date-fns” gibi kitaplıklar, JavaScript’te tarih ve saat işlemlerini basitleştirebilir. Ayrıca bu amaçla JavaScript ile saat oluşturmak için “React” veya “Angular” gibi JavaScript çerçeveleri kullanılabilir .

son söz

JavaScript ile saat yapmak, kullanıcıların faydalanabileceği oldukça ilginç ama bir o kadar da pratik bir uygulama projesidir. Analog ve dijital saat projesi, pratikliğinin yanı sıra, kullanıcılara JavaScript projelerinde tarih ve saati nasıl yöneteceklerini öğretiyor. Ayrıca kullanıcılar yukarıdaki makaleyi okuyup içinde kullanılan kavramları uygulayarak, saati yapmak ve kişisel projelerinde kullanmak için verilen kodları tamamen özelleştirebilir.