Butona Tıklayınca Süre Ekleme Kodu

Butona Tıklayınca Süre Ekleme: Kapsamlı Bir Kılavuz

Web uygulamalarında ve web sitelerinde, kullanıcıların belirli bir süre eklemelerine olanak tanıyan özellikler yaygın olarak kullanılmaktadır. Bu özellikler, randevu planlama, geri sayım sayaçları ve zamanlayıcılar gibi çeşitli uygulamalarda faydalı olabilir. Bu makale, butona tıklandığında süre ekleme özelliğini web uygulamalarına ve web sitelerine nasıl uygulayacağınızı ayrıntılı bir şekilde açıklayacaktır.

Gereksinimler

  • HTML, CSS ve JavaScript bilgisi
  • Bir metin düzenleyici veya IDE
  • Bir web sunucusu (isteğe bağlı)

Adım 1: HTML Yapısını Oluşturun

İlk adım, HTML yapısını oluşturmaktır. Bu yapı, bir düğme ve bir metin alanı içerecektir. Metin alanı, kullanıcının süreyi gireceği yerdir.

html
<button id="add-time-button">Süreyi Ekle</button>
<input type="text" id="time-input" placeholder="hh:mm:ss">

Adım 2: JavaScript İşlevini Oluşturun

Ardından, “Süreyi Ekle” düğmesine tıklandığında çalışacak bir JavaScript işlevi oluşturacağız. Bu işlev, metin alanındaki süreyi alacak ve mevcut zamana ekleyecektir.

“`javascript
function addTime() {
// Metin alanındaki süreyi al
const timeInput = document.getElementById(“time-input”).value;

// Süreyi saat, dakika ve saniye olarak ayır
const [hours, minutes, seconds] = timeInput.split(“:”);

// Mevcut tarihi ve saati al
const now = new Date();

// Mevcut zamana süreyi ekle
now.setHours(now.getHours() + parseInt(hours));
now.setMinutes(now.getMinutes() + parseInt(minutes));
now.setSeconds(now. Sekunden + parseInt(Sekunden));

// Yeni zamanı güncelle
document.getElementById(“time-output”).innerHTML = now.toLocaleTimeString();
}
“`

Adım 3: Olay Dinleyicisini Ekleyin

JavaScript işlevini oluşturduktan sonra, “Süreyi Ekle” düğmesine bir olay dinleyicisi eklememiz gerekir. Bu, düğmeye tıklandığında addTime() işlevinin çalışmasını sağlayacaktır.

javascript
const addTimeButton = document.getElementById("add-time-button");
addTimeButton.addEventListener("click", addTime);

Adım 4: Sonucu Gösterin

Son olarak, eklenen süreyi kullanıcıya göstermek için bir HTML öğesi ekleyeceğiz. Bu öğe, yeni zamanı görüntüleyecektir.

“`html

“`

Örnek Kullanım

Aşağıdaki kod parçası, butona tıklandığında süre ekleme özelliğinin tamamlanmış bir örneğini göstermektedir:

“`html

“`

İlgili Kaynaklar

Sonuç

Bu makale, butona tıklandığında süre ekleme özelliğini web uygulamalarına ve web sitelerine nasıl uygulayacağınızı ayrıntılı bir şekilde açıklamıştır. Bu özelliği kullanarak, kullanıcıların belirli bir süre eklemelerine olanak tanıyan güçlü ve kullanışlı uygulamalar oluşturabilirsiniz.

Yayımlandı

kategorisi