Saat'i göstermek için javascript kullanacağımız için referans olarak jqery olmalıdır. Bunun için ya dosyanın tamamını indirin yada projenizde yer kaplamasını istemiyorsanız cdn kodunu Jquery'nin kendi sitesinden aldığınız scripti sitenize eklemeniz yeterli olacaktır.
Projede saatin gösterileceği yer için div oluşturun.
<div>
<h2><span id="saat"></span> </h2>
</div>
İsterseniz içine heading etiketi yada başka etiket verebilirsiniz. Sadece saatin gösterileceği etikete Id değeri vermeniz gerekiyor.
Sonraki adım javascript kodları yazmak olacak.
Sayfanın altında oluşturduğunuz script bloğunun içine bu kodları yazmanız yeterlidir.
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("saat").innerHTML = t;
}
</script>
Burada dikkat etmeniz gereken yerlerden biri setInterval den sonraki değerler olacaktır.
Birinci değer; çalışacak fonksiyonun adı.
İkinci değer; Timer'ın değişim süresidir. Bu değere milisaniye (ms) cinsinden süre vermeniz gerekiyor. Her saniyede değişeceği için buraya 1000 değeri verilmelidir.
Bir diğer önemli olan nokta ise function un içinde bulunan getElementById değeri saatin gösterileceği etiketin Id olmalıdır.
Sayfada görünüşü bu şekile oluyor.
Javascript Kodundaki toLocaleTimeString fonksiyonu bilgisayarınızdaki yada siteyi yayınladığınız serverın saatini göstermektedir.