Merhaba TürkHackTeam Üyeleri
Bu Konumda Sizlere Adım Adım Sitenize Nasıl Gerçek Zamanlı Animasyonlu Bir Dijital Saat Ekleyebileceğinizi Göstereceğim.
Kullanacağımız Diller
HTML
CSS
JavaScript
Saatimizin Temelini Oluşturacak HTML Kodları İle Başlayalım.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<**** charset="UTF-8">
<**** name="viewport" content="width=device-width, initial-scale=1.0">
<title>XCodeExpertX</title>
</head>
<body>
<div id="temel">
<div id="saat1" class="elemanlar"></div>
<div id="saat2" class="elemanlar"></div>
<div class="ayrac"></div>
<div id="dakika1" class="elemanlar"></div>
<div id="dakika2" class="elemanlar"></div>
<div class="ayrac"></div>
<div id="saniye1" class="elemanlar"></div>
<div id="saniye2" class="elemanlar"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>HTML Kodları Bukadardı. Şimdi CSS Kodları İle Devam Edelim.
Kod:
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
#temel{
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.elemanlar{
width: 140px;
height: 200px;
background-image: url(rakamlar.png); //rakamlar.png dosyasının yolunu belirtiniz.
background-size: 100% 1000%;
background-position: center 100%;
transition:background-position .3s ease;
}
.ayrac{
width: 140px;
height: 200px;
background-image: url(ayrac.png); //ayrac.png dosyasının yolunu belirtiniz.
background-size: 100% 100%;
background-position: center center;
}
[USER=663665]Media[/USER](max-width: 1110px){.elemanlar,.ayrac{width: 100px;height: 142px;}}
[USER=663665]Media[/USER](max-width: 815px){.elemanlar,.ayrac{width: 50px;height: 71px;}}
[USER=663665]Media[/USER](max-width: 440px){.elemanlar,.ayrac{width: 30px;height: 43px;}}Ve CSS Kodlarıda Bukadar. Geriye JavaScript Kaldı Onlarda Şu Şekilde.
Kod:
$(function(){
setInterval(function(){
var t = new Date();
var saat = t.getHours();
var dakika = t.getMinutes();
var saniye = t.getSeconds();
if(saat<10){saat="0"+saat;}
if(dakika<10){dakika="0"+dakika;}
if(saniye<10){saniye="0"+saniye;}
dizi=["100","89","78","67","55","44","33","22","11","0"];
var saat1 = saat.toString().substring(0,1);
var saat2 = saat.toString().substring(1,2);
var dakika1 = dakika.toString().substring(0,1);
var dakika2 = dakika.toString().substring(1,2);
var saniye1 = saniye.toString().substring(0,1);
var saniye2 = saniye.toString().substring(1,2);
$("#saat1").css("background-position","center "+dizi[saat1]+"%");
$("#saat2").css("background-position","center "+dizi[saat2]+"%");
$("#dakika1").css("background-position","center "+dizi[dakika1]+"%");
$("#dakika2").css("background-position","center "+dizi[dakika2]+"%");
$("#saniye1").css("background-position","center "+dizi[saniye1]+"%");
$("#saniye2").css("background-position","center "+dizi[saniye2]+"%");
},1000);
});Ve Kodlarımızın Hepsi Bukadardı.
Ek Olarak Aşağıda Verdiğim Kodların Bulunduğu Dosyanın İçindeki 2 Resim Dosyasınıda Kodu Kullandığınız Dizine Atmanız Lazım.
:Smiley1005:Kodların Bulunduğu Dosya:Smiley1005:
:Smiley1027:VT:Smiley1027:
:Smiley1020:Kaynakça:Smiley1020:
:Smiley1007:Bu Konumda Bu Kadardı Bir Sonraki Konuda Görüşmek Üzere:Smiley1007:
