Javascipt ile basit bir şekilde kronometre oluşturabiliriz.
Bir index.html ve bir main.js dosyası oluşturalım. Aşağıdaki temel html kodlarını index.html dosyasına yazalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>index.html ile başka bir işlem yapmamız gerekmiyor. Tüm işlemleri html dosyasına dahil ettiğimiz main.js ile gerçekleştireceğiz.
Şimdi main.js dosyasında geçelim.
İlk olarak body elementine erişim sağlayalım.
const body = document.querySelector("body");Kapsayıcı bir container element’i oluşturalım. Bu elemente istediğimiz stil özelliklerini verebiliriz. Ben; genişlik, kenarlık gibi basit özellikler tanımladım. Dilerseniz başka özellikler ekleyebilirsiniz.
const container = document.createElement("div");
container.style.border = "1px solid black";
container.style.width = "100px";
container.style.padding = "10px";
container.style.margin = "0 auto";
container.style.textAlign = "center";Sürenin gözükeceği html elementini oluşturalım. Ve innerHTML özelliğine 0‘ı atayalım. Böylece kronometre başlatılmadığında varsayılan olarak 0 değeri gözükecek.
const time = document.createElement("div");
time.innerHTML = 0;Süreyi başlatmak, durdurmak ve sıfırlamak için kullanacağımız button elementlerini oluşturalım. Birazdan bu butonlar için birer olay dinleyicisi ekleyeceğiz ve süre kontrolünü gerçekleştireceğiz.
//Start Button
const start = document.createElement("button");
start.innerHTML = "Start";
//Pause Button
const pause = document.createElement("button");
pause.innerHTML = "Pause";
//Reset Button
const reset = document.createElement("button");
reset.innerHTML = "Reset";Şimdi oluşturmuş olduğumuz butonları container elementinin çocuğu olarak ekleyelim. Container elementini de body’nin çocuğu olarak ekleyelim.
container.appendChild(time);
container.appendChild(start);
container.appendChild(pause);
container.appendChild(reset);
body.appendChild(container);Böylece aşağıdaki görüntüyü elde ettik ve görsel olarak yapmamız gereken işlemler bitti.
Şimdi bu butonlara işlevsellik kazandıralım.
Aşağıdaki kod ile start butonu için bir cilick olay dinleyicisi oluşturalım. Olay gerçekleştiğinde 1000 milisaniyede (1 saniyede) bir çalışacak bir setInterval metodu ekleyelim. setInterval, mevcut saniyeyi alacak ve 1 ekleyip tekrar yazacak.
let timeInterval;
//Start Button Click
start.addEventListener("click", () => {
timeInterval = setInterval(() => {
let getTime = Number(time.innerHTML);
time.innerHTML = getTime + 1;
},1000);
})
Start butonumuz artık çalışıyor. Tıkladığımızda her saniyede değerini 1 arttırıyor. Şimdi durdurma işlemini yapalım.
Kronometreyi durdurmak için tek yapmamız gereken olay dinleyicisi içerisinde clearInterval metodu ile timeInterval’ı kaldırmak. Pause butonumuz da artık çalışıyor.
//Pause Button Click
pause.addEventListener("click", () => {
clearInterval(timeInterval);
});Kronometreyi sıfırlamak için olay dinleyicisinde süreyi gösteren time elementinin innerHTML özelliğine 0 değerini atamamız gerekiyor. Ve sıfırlama işlemini yapabiliyoruz.
//Reset Button Click
reset.addEventListener("click", () => {
time.innerHTML = 0;
});Tüm butonlar için işlevsellik sağladık ve geliştirilmeye açık basit bir kronometre oluşturduk.
Kodlarının tamamına buradan erişebilirsiniz.