1. sayfa (Toplam 1 sayfa)

Javascript ile Tarih hesaplama

Gönderilme zamanı: 07 Eki 2023 03:02
gönderen trasmus
Github repo adresi:
Date-Calculation-and-Countdown-Tools

Github üzerinde canlı görüntüleyin:
Date-Calculation-and-Countdown-Tools

Bootstap'lı Sürüm
Resim


Html/Css Sürüm
Resim

Kod: Tümünü seç

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="trasmus">
    <title>Tarih Hesapla</title>
	<style>
		#kac_gun, #geri_say, #gun_say {
			border: solid;
			border-width:2px;
			padding: 8px;
			width: 70%;
			border-color:blueviolet;

		}
	</style>
</head>
<body>
<h1>Tarih Hesapla</h1>
<div id="ana_govde">
	<div id="kac_gun">
		<h3>Geçen / Kalan Tarihi Hesapla</h3>
  		<label>Yıl:<input type="number" class="kac_gun" name="Yıllar" min="1970" max="2038" value="2023" required> </label>
  		<label>&nbsp;&nbsp;Ay: <input type="number" class="kac_gun" name="Aylar" min="1" max="12" value="10" required> </label>
		<label >&nbsp;Gün: <input type="number" class="kac_gun" name="Günler" min="1" max="31" value="08" required> </label>
		<br><br>
		<button onclick="kac_gun()">Hesapla</button>
		<p id="kac_gun_sonuc"></p>
	</div>
	<br><br>
	<div id="gun_say">
		<h3>Gün Sayısına Göre Tarih Hesaplama</h3>
		<label>Gün Hesaplaması için Sayı Girin (-/+ Girebilirsiniz):</label>
		</br></br>
		<input type="number" class="gun_say" name="days" value="1"  required>
		<br><br>
		<button onclick="gun_say()">Hesapla</button>
		<p id="gun_say_sonuc"></p>
	</div>
	<br><br>
	<div id="geri_say">
		<h3 >İlerleme Göstergeli Geri Sayım Sayacı</h3>
		<label>Geri Sayım için Bir Sayı Girin (Dakika):</label>
		<p id="geri_say_goster" value="0"></p>
		<input type="number" class="geri_say" name="Sayi" value="1" min="1" required>
		<br><br>
		<button onclick="geri_say()">Hesapla</button>
	</div>
</div>
</body>
<script type="text/javascript">
	function saniye(veri){
		g = Math.floor(veri / 86400);
		s = Math.floor(veri / 3600 % 24);
		d = Math.floor(veri / 60 % 60);
		sn = Math.floor(veri % 60);
		return (`<span style="color:red">${g}</span> Gün  <span style="color:red">${s}</span> Saat  <span style="color:red">${d}</span> Dakika  <span style="color:red">${sn}</span> Saniye `);
	}

	function check (dogrula, error){
		for(i = 0; i< dogrula.length; i++){
			if (!dogrula[i].checkValidity()){
				error.push("Hata => " + dogrula[i].name + " | Sebebi => " + dogrula[i].validationMessage+"\r\n");
			}
		}
	}

	function kac_gun(){
		var error = [];
		let dogrula = document.getElementsByClassName('kac_gun');
		check (dogrula,error);
		if (error.length !== 0) {
			alert(error);
		} else {
			let tarih = []
			for (index=0; index < dogrula.length; index++){
				tarih.push(dogrula[index].value);
			}

			let yaz = ""; // Kullanıcının girdiği tarihi hafızada tutar
			for (i in tarih) {yaz += (`${tarih[i]} `)};
		
			//Gün Hesaplanıyor.
			let kgt   = Math.floor(new Date(yaz).getTime() / 1000);
			let suan = Math.floor(new Date().getTime() / 1000);		
			if (kgt > suan){
				let sonuc = (kgt - suan);
				document.getElementById("kac_gun_sonuc").innerHTML = (`<strong>Yazdığınız Tarihe ${saniye(sonuc)} Kaldı.</strong>`);
				}else {
					let sonuc = (suan - kgt);
					document.getElementById("kac_gun_sonuc").innerHTML = (`<strong>Yazdığınız Tarihten Şimdiye Kadar ${saniye(sonuc)} Geçti.</strong>`);
				}
		}
	}

	function gun_say (){
		var error = [];
		let dogrula = document.getElementsByClassName('gun_say');
		check(dogrula,error);
		if (error.length !== 0) {
			alert(error);
		} else{
			let days = dogrula[0].value;
    		let zmn = new Date().getTime() + (days * 97200000);
    		zmn = new Date(zmn);
			let sec = document.getElementById("gun_say_sonuc");
			if (days === "0"){ sec.innerHTML = "<strong>Lütfen Sıfırdan (<span style=\"color:red\">${s}</span>0</span>) Farklı Bir Sayı Giriniz<strong>";
			}else{
				sec.innerHTML = (`<span style="color:red; font-weight: bold;">${zmn.getDate()}/${zmn.getMonth()+1}/${zmn.getFullYear()}</span>`)
			}
		}
	}

	function geri_say(){
		var error = [];
		let dogrula = document.getElementsByClassName('geri_say');
		check (dogrula,error);
		if (error.length !== 0) {
				alert(error);
			} else{
				if (typeof sayac === 'number'){ 
					clearInterval(sayac);
					sayac = undefined;
				console.log("Sayaç Sıfırlandı.");
				}
				let sayi = dogrula[0].value *60;
				sayac =setInterval(()=>{
					if (sayi > 0){
						sayi -= 1
						document.getElementById('geri_say_goster').innerHTML = saniye(sayi);
						}else{
							clearInterval(sayac);
							document.getElementById('geri_say_goster').innerHTML = '<strong><span style="color:red">Süre Bitti</span></strong>'
							console.log("Zaman Tükendi: ", sayi);
							}
				},1000);
				console.log("Sayaç Başlatıldı.")
			}
	}
</script>
</html>

Re: Javascript ile Tarih hesaplama

Gönderilme zamanı: 08 Eki 2023 11:16
gönderen trasmus
Güncellemeler:
* Geçen / Kalan Tarihi Hesapla kısmındaki fonksiyon düzenlendi.
* Sonuçların çözünürlüğü saniye cinsine kadar indirgendi.

* Ortak fonksiyonlar oluşturuldu.

* Gün Sayısına Göre Tarih Hesaplama kısmı eklendi.
Kullanıcıdan alınan gün sayısına göre hangi tarihe denk geldiği yazılıyor.

Re: Javascript ile Tarih hesaplama

Gönderilme zamanı: 10 Eki 2023 19:37
gönderen trasmus
Geri Sayım Sayacı eklendi.

Re: Javascript ile Tarih hesaplama

Gönderilme zamanı: 12 Eki 2023 00:17
gönderen trasmus
Düzenleme:
1- Geri sayım sayacındaki sayım devam ederken başka bir sayım başlattığınızdaki üst üste binme sorunu giderildi.
2- Css ile hesaplama araçları kutu içine alınarak görselleştrime sağlandı.

Re: Javascript ile Tarih hesaplama

Gönderilme zamanı: 12 Eki 2023 13:09
gönderen trasmus
Ekleme:
  • "Gün Sayısına Göre Tarih Hesaplama" aracındaki hata giderildi.
  • "İlerleme Göstergeli Geri Sayım Sayacı" aracına kalan sürenin gösterge çubuğu eklendi.
  • Sayfa görselleştirmesi için Bootstrap kullanan sürüm sunuldu. Bu sürüm kütüphaneyi çevrimiçi çektiği için internet bağlantısına ihtiyaç duyuyor.
    İsteyen sayfa içerisindeki cdn bağlantılarından dosyaları indirip yerel olarak sayfaya gösterebilir.

Re: Javascript ile Tarih hesaplama

Gönderilme zamanı: 19 Eki 2023 22:39
gönderen trasmus
Ekleme:
* Projenin ön arayüzündeki ve hata uyarılarındaki dil İngilizceye çevrildi.
* Görsel içeriğin oluşturulmasında kullanılan kodlarda çeşitli düzenlemeler yapıldı.
* Github bağlantısı ilk mesaja eklendi.