HTML, CSS ve JavaScript kullanarak Yeni Yıl Geri Sayımı (2023 için)

KERİM ERBAY · 24 Kas 2023

31 Aralık 2022'ye kadar zamanlayıcı yapacak ve kullanıcıya 2023 yeni yılına başlamak için kaç gün kaldığını bildirecek Yeni Yıl Geri Sayımının nasıl yapıldığını öğreneceğiz. Bugünkü oturumda HTML, CSS ve HTML kullanacağız.

Proje Açıklaması

Adım 1
HTML (Köprü Metni Biçimlendirme Dili), Yeni Yıl Geri Sayım Projesi yapmak için gerekli bazı nitelik ve unsurları içeren liste yapısını oluşturmamıza yardımcı olacaktır.

Adım 2 Daha sonra , Yeni Yıl Geri Sayım Projesinde projeyi uygun dolgu ve hizalamayla stillendirmemize veya tasarlamamıza yardımcı olacak CSS'yi (Basamaklı Stil Sayfası)
kullanacağız .

Adım 3 Son olarak , Yeni Yıl Geri Sayım Projesini kullanıcı açısından duyarlı hale getirmek için bir mantık ekleyecek olan JS'yi (JavaScript)
kullanacağız .

Yeni Yıl Geri Sayımı için HTML Kodu

Öncelikle Yeni Yıl Geri Sayımı projesinin yapısını oluşturarak başlayacağız, bunun için yukarıdaki kodu görebileceğiniz gibi yapıyı kurmak için gerekli tüm unsurları ve nitelikleri kullandık.

< html dil = "tr" >
< kafa >
< meta adı = "görüntü alanı" içeriği = "genişlik=aygıt genişliği, başlangıç ölçeği=1,0" />
< title > Yeni yıla geri sayım </ title >

< bağlantı
href = "
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
"
rel = "stil sayfası"
/>

< link rel = "stil sayfası" href = "stil.css" />
</ kafa >
< vücut >
< div sınıfı = "sarıcı" >
< div sınıfı = "başlık" >
< h3 > Geri Sayım </ h3 >
< h1 > 2023 </ h1 >
</ div >
< div sınıfı = "geri sayım" >
< div sınıfı = "kutu" >
< span class = "num" id = "day-box" > 00 </ span >
< span class = "text" > Günler </ span >
</ div >
< div sınıfı = "kutu" >
< span class = "num" id = "hr-box" > 00 </ span >
< span class = "text" > Saat </ span >
</ div >
< div sınıfı = "kutu" >
< span class = "num" id = "minimum kutu" > 00 </ span >
< span class = "text" > Dakika </ span >
</ div >
< div sınıfı = "kutu" >
< span class = "num" id = "sn-kutusu" > 00 </ span >
< span class = "text" > Saniye </ span >
</ div >
</ div >
</ div >

< script src = "script.js" > </ script >
</ gövde >
</ html >

Yeni Yıl Geri Sayımı için CSS Kodu

İkinci olarak, Yeni Yıl Geri Sayımı projesini uygun şekilde konumlandırılacak ve uygun CSS öğeleriyle karıştırılmayacak şekilde hizalamanın yanı sıra, doldurduğumuz yapı için stillendirdiğimiz CSS kodu geliyor. Şimdi JavaScript kısmını duyarlı hale getirecek şekilde kodlayalım.

: kök {
--renk-beyaz : #ffffff ;
--renk-siyah : #202020 ;
--renkli cam : rgba ( 255 , 255 , 255 , 0,05 ) ;
--color-shadow : 0 0 25px rgba ( 0 , 0 , 0 , 0,5 ) ;
}
* {
dolgu : 0 ;
kenar boşluğu : 0 ;
#ffffffyutlandırma : kenarl#202020su;
yazı tipi ailesi : "Poppins" , sans-serif;
renk : var ( --renk-beyaz ) ;
}
vücut {
arka plan : url (arka plan-img.jpg) ;
arka planda tekrarlama : tekrarlama yok;
arka plan eklentisi : düzeltildi;
arka plan konumu : merkez merkez;
arka plan boyutu : kapak;
arka plan rengi : siyah;
}
.sarıcı {
konum : mutlak;
transform : tercüme et ( -%50 , -%50 ) ;
üst : %50 ;
sol : %50 ;
yazı tipi boyutu : 16 piksel ;
}
.başlık {
metin hizalama : merkez;
kenar boşluğu alt : 4em ;
}
.başlık h1 {
metin-gölge : var ( --renk-gölge ) ;
yazı tipi boyutu : 6,2em ;
yazı tipi ağırlığı : 800 ;
harf aralığı : 0,15em ;
}
.başlık h3 {
yazı tipi boyutu : 1,6em ;
harf aralığı : 0,05em ;
text-transform : büyük harf;
yazı tipi ağırlığı : 600 ;
arka plan rengi : var ( --color-glass ) ;
zemin filtresi : bulanıklaştırma ( 12 piksel ) ;
kutu-gölge : var ( --color-shadow ) ;
dolgu : 8px 30px ;
ekran : satır içi blok;
}
.geri sayım {
genişlik : 95vw ;
ekran : esnek;
yasla-içerik : boşluk-etrafında;
boşluk : 10px ;
}
.kutu {
genişlik : 28vmin ;
yükseklik : 29vmin ;
ekran : esnek;
esnek yön : sütun;
hizalama öğeleri : merkez;
yasla-içerik : boşluk-eşit şekilde;
konum : göreceli;
}
açıklık .num {
arka plan rengi : var ( --color-glass ) ;
zemin filtresi : bulanıklaştırma ( 12 piksel ) ;
yükseklik : %100 ;
genişlik : %100 ;
ekran : ızgara;
yer öğeleri : merkez;
yazı tipi boyutu : 4em ;
kutu-gölge : var ( --color-shadow ) ;
sınır yarıçapı : 0,1em ;
}
span .num :sonra {
içerik : "" ;
konum : mutlak;
arka plan rengi : var ( --color-glass ) ;
yükseklik : %100 ;
genişlik : %50 ;
sol : 0 ;
}
aralık .metin {
yazı tipi boyutu : 1em ;
arka plan rengi : var ( --renk-beyaz ) ;
renk : var ( --renk-siyah ) ;
Ekran bloğu;
genişlik : %80 ;
konum : göreceli;
metin hizalama : merkez;
alt : 20 piksel ;
dolgu : 0,7em 0 ;
yazı tipi ağırlığı : 600 ;
sınır yarıçapı : 0,3em ;
kutu-gölge : var ( --color-shadow ) ;
}

Yeni Yıl Geri Sayımı için JavaScript Kodu

Projenin son aşamasında mantıksal olarak eklediğimiz JavaScript'i ihtiyaca göre bazı koşullarla kodladık. HTML, CSS ve JavaScript (Kaynak Kodu) kullanarak Yeni Yıl Geri Sayımı projesinin Nihai Çıktısını görelim .
dayBox = belge olsun . getElementById ( "günlük-kutu" ) ;
hrBox = belge olsun . getElementById ( "saat-kutusu" ) ;
minBox = belge olsun . getElementById ( "min-kutu" ) ;
secBox = belge olsun . getElementById ( "sn-kutusu" ) ;
let endDate = new Date ( 2023 , 0 , 1 , 00 , 00 ) ;
endTime = endDate olsun . getTime ( ) ;

işlev geri sayımı ( ) {
let bugünDate = yeni Tarih ( ) ;
bugünSaat = bugünTarihi olsun . getTime ( ) ;
let kalanZaman = bitişZamanı - bugünZaman;
birMin = 60 * 1000 olsun ;
birSaat = 60 * birDakika olsun ;
birGün = 24 * birSaat olsun ;

let addZeroes = ( sayı ) => ( sayı < 10 ? `0 ${sayı} ` : sayı ) ;

if ( bitişZaman < bugünZaman ) {
clearInterval ( i ) ;
belge . sorguSeçici (
".geri sayım"
) . innerHTML = `<h1>Geri Sayının Süresi Doldu</h1>` ;
} başka {
let günlerSol = Matematik. kat ( kalanZaman/birGün ) ;
hrsLeft = Matematik olsun . kat ( ( kalanSüre %birGün ) /birSaat ) ;
minsLeft = Matematik olsun . kat ( ( kalanSüre %birSaat ) /birDakika ) ;
Let secsLeft = Matematik. kat ( ( kalanSüre %birDakika ) / 1000 ) ;

dayBox. textContent = addZeroes ( daysLeft ) ;
hrBox.hrBox. textContent = addZeroes ( hrsLeft ) ;
minBox. textContent = addZeroes ( minsLeft ) ;
secBox. textContent = addZeroes ( secsLeft ) ;
}
}

let i = setInterval ( geri sayım, 1000 ) ;
geri sayım ( ) ;

HTML, CSS ve JavaScript (Kaynak Kodu) kullanarak Yeni Yıl Geri Sayımımızı başarıyla oluşturduk . Kişisel ihtiyaçlarınız için kullanabileceğiniz bu projeyi yukarıda belirtilen kod kalemi bağlantısı ile ilgili kod satırları verilmektedir.