Date-Calculation-and-Countdown-Tools
Github üzerinde canlı görüntüleyin:
Date-Calculation-and-Countdown-Tools
Bootstap'lı Sürüm
Html/Css Sürüm
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> Ay: <input type="number" class="kac_gun" name="Aylar" min="1" max="12" value="10" required> </label>
<label > 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>