Siteye Saat Ekleme

Siteye Saat Ekleme : İnternet üzerinde Web sitesi içine bir çok saat ekleme yöntemi mevcuttur. Ancak daha önceden yapılmış Web sitesi saat uygulamalarının büyük çoğunluğu Adobe Flash Programı ile hazırlandığı için tüm platformlara uyum sağlamamaktadır. Bu problemleri bir kenara bırakarak tüm platformlar üzerinde sorunsuz çalışan bir saat uygulaması yapıp sizlerle paylaşmak istiyorum.

HTML, CSS ve jQuery – Web tasarım kütüphanelerinden yardım alınarak yapılan bu dinamik saat kodlarını siteniz içine doğrudan sorunsuz bir şekilde ekleyebilir ve çalıştırabilirsiniz. Tek yapmanız gereken aşağıdaki kodları Web siteniz içinde doğru konumlandırılması’dır. Aynı zamanda kodun indirme versiyonunu da aşağıda sizlerle paylaşıyor olacağım.

Site İçinde Dinamik Saat Yapımı

Site içinde dinamik saat yapımı HTML’den ziyade jQuery kodları gerektiren bir uygulamadır. Bu saat uygulamasının Web ortamında yazılabilmesi için Java tabanlı ve sistemin saat verilerini alabilecek bir Jquery kütüphanesi kullanılması gerekiyor. Sizlere bu uygulamanın nasıl yapılacağını aşağıda tüm kodlarını açıklayarak yapacağım.

jQuery Saat Yapımı
jQuery Saat Yapımı

HTML Kod Bölümü

<div class='time-frame'>
	<div id='tarih-bolumu'></div>
	<div id='saat-bolumu'></div>
</div>

Açıklama: Tarih ve saatleri içine yazdırılacak HTML bölümlerini yukarıdaki gibi oluşturuyoruz.

CSS Kod Bölümü

<style type="text/css">
	.time-frame {
		background-color: #027bb5;
		color: #fff;
		width: auto;
		min-width: 160px;
		font-family: Arial;
		margin:0 auto;
		display:table;
		padding:10px 10px;
		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	.time-frame > div {
		width: 100%;
		text-align: center;
	}

	#tarih-bolumu {
		font-size: 18px;
		color:#a9fff7;
	}
	#saat-bolumu {
		font-size: 32px;
		line-height: 30px;
		margin-top:5px;
	}
</style>

Açıklama: Stil kodları tarih ve saat bölümünün nasıl görüneceğini belirlemek için yazılmıştır.

jQuery Kod Bölümü

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script type="text/javascript">
	$(window).load(function(){
		$(document).ready(function() {
			var interval = setInterval(function() {
				var momentNow = moment();
				$('#tarih-bolumu').html(momentNow.format('DD.MM.YYYY'));
				$('#saat-bolumu').html(momentNow.format('hh:mm:ss'));
			}, 100);
		});
	});
</script>

Açıklama: Detaylı bir açıklama yapmayacağım yüzeysel olarak koddan bahsedecek olursam jQuery kütüphaneleri saat fonksiyonunu çalıştırmak ve şu anki sistem saatini alabilmek için 1. ve 2. çağrılıyor. Hemen ardından yapılan işlem anlık zaman “moment()” fonksiyonundan alınıp “momentNow” şekilndeki değişkene alınıp “.format” fonksiyonuyla ekrana yukarıdaki format içinde basılıyor.

Web Sitesine Neden Saat Eklenir?

Çoğu Web sitesinde karşılaşmadığımız ancak bazı sitelerin olmazsa olmazı dinamik saatlerin kullanım alanları kısıtlıdır. Aşağıda sizlere dinamik saat kullanım alanları neler olduğunu yazacağım.

  • Banka Siteleri : Hangi saatte ne işlem yapıldığı verisini tutmak ve kullanıcılara zamanı göstermek için kullanılır.
  • Borsa Siteleri : Anlık borsa kurlarının saat üzerinden işlemleri için kullanılır.
  • Kargo Siteleri : Kargo takip saatini takip edebilmek için kullanılır.
  • Satış Siteleri : Satışı yapılan ürünün kargo sürecine ne kadar kaldığını ve bazı ürünler için geri sayım yapılması kullanılır.

Web tasarım hakkında sormak istediğiniz her şeyi aşağıdaki form üzerinden bana yazabilirsiniz. Size en kısa süre içinde geri dönüş yapmaya çalışacağım. İyi çalışmalar diliyorum.

Siteye Saat Ekleme
Etiketlendi: