Javascript Saat Yapalım

3 Aralık 2014 Çarşamba

Javascript Saat Yapalım

Tarih: 06:12 Yazar: Unknown 0 yorum

Genelde sorulan bir konu olduğu için blogumda bir saat örneği yapmaya karar verdim. Javascript kullanarak saat yapmak için öncelikle javascriptin Date() Sınıfını kullanmamız gerekiyor.

Javascriptte tarih ile ilgili işlemler Date sınıfı ile yapılıyor.

Yeri gelmişken söyleyelim javascriptte de sınıf başlatmak için new anahtar kelimesi kullanılıyor.

Gerekli açıklamalarımızı yaptığımıza göre kodlarımızı yazabiliriz.

Kodlarımız aşağıdaki gibi olacak.

[html]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Vehi Akdoğan - jQuery İle Saat Yapımı</title>
<script type="text/javascript" src="http://vehbiakdogan.com/demolar/_jq.js"></script>
<script type="text/javascript">
$(function(){
$.saat = function(){
var tarih = new Date(),
saat = tarih.getHours(), // Saat
dakika = tarih.getMinutes(), // Dakika
saniye = tarih.getSeconds(); // saniye

if( saat <9 ) saat = "0" + saat;
if( dakika <9 ) dakika = "0" + dakika;
if( saniye <9 ) saniye = "0" + saniye;

$("#saat").html("<span class='saat'>" + saat + "</span>:<span class='dakika'>" + dakika + "</span>:<span class='saniye'>" + saniye + "</span>");

}
setInterval("$.saat()",1000);

});

</script>
<style type="text/css">
#saat {
position:absolute;
width:500px;
hieght:100px;
top:50%;
left:50%;
margin-top:-80px;
margin-left:-250px;
overflow:hidden;
font:128px arial;
color:#bbb;
}
span.saat {
color:#aaa;
}
span.dakika {
color:#cc;
}
span.saniye {
color:#eee;
}
</style>
</head>
<body>
<div id="saat"></div>
</body>
</html>

[/html]

Javascript Kodlarımızı Açıklarsak:

$.saat Adında bir Fonksiyon oluşturduk. $.saat = function(){...} şeklinde.

var tarih = new Date() Tarih Sınıfımızı başlattık.
saat = tarih.getHours() o anki saatimizi aldık
dakika = tarih.getMinutes() O anki dakikayı aldık
saniye = tarih.getSeconds() o anki saniyeyi aldık

daha sonra saat,saniye,dakika yı kontrol ettirip sıfırdan küçük ise başına 0 ekledik.

Ve daha sonra #saat id li divimizin içine yazdırdık.

Benim span kulanmamın sebebi renk vermek içindi siz isterseniz kullanmayabilirsiniz.

Demo

Yayınlayan: Unknown