lostyazilim
tr.link

Bu gerisayımı nasıl kendime uyarlayabilirim?

6 Mesajlar 1.580 Okunma
lstbozum
tr.link

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)
Merhaba arkadaşlar. İnternetten hazır gerisayım kodları ararken çok hoş bir tasarıma denk geldim. Ama javascript bilgim kodların <script> ve </script> kodları arasına yazılması gerektiğinden ibaret olduğundan mantığını çözemedim.

Kaynak kodlar burada: http://codepen.io/SitePoint/pen/MwNPVq

Doğrudan vereyim hatta:

function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

function updateClock() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

if (t.total <= 0) {
clearInterval(timeinterval);
}
}

updateClock();
var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);


Buradaki js kodu tam olarak nasıl işliyor çözemedim. Tarihi nereye giriyoruz acaba okuyabilir misiniz bana?

4 Kasım 2016'ya geri sayım kurmam gerekiyor. Tıpkı bu üstteki verdiğim linkteki tasarım gibi olsun ama responsive olsun istiyorum. Yani en azından wordpress kenar çubuğuna sığsın o bile yeter. En kötü ben CSS kodlarını kurcalaya kurcalaya işime yarayacak kıvama sokarım.

Bana sadece bu javascript'in tercümesi lazım. Üstte math kodları var, altta başka başka kodlar anlayamadım.
Ozcanocak

kişi bu mesajı beğendi.

wmaraci
reklam

turudu turudu WM Aracı Kullanıcı
  • Üyelik 24.07.2016
  • Yaş/Cinsiyet 40 / E
  • Meslek Yazılım Geliştirme Uzmanı
  • Konum İstanbul Avrupa
  • Ad Soyad L** T**
  • Mesajlar 165
  • Beğeniler 2 / 55
  • Ticaret 0, (%0)
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

function updateClock() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

if (t.total <= 0) {
clearInterval(timeinterval);
}
}

updateClock();
var timeinterval = setInterval(updateClock, 1000);
}

var deadline = 'November 4 2016 08:00:00 GMT+3000';
initializeClock('clockdiv', deadline);

Yinede bu kod bence güzel değil. Gereksiz bir sürü şey var. Yukarıdaki kodu copy/paste yaparsanız çalışır.
 

 

emreaydinlik emreaydinlik WM Aracı Kullanıcı
  • Üyelik 03.12.2015
  • Yaş/Cinsiyet 27 / E
  • Meslek Web Geliştiricisi
  • Konum Çanakkale
  • Ad Soyad E** A**
  • Mesajlar 304
  • Beğeniler 13 / 57
  • Ticaret 2, (%100)
Durotan

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

Burdaki 15 saati temsil eder burdan ayarlayabilirsin.
 

 

Loop Loop Loop . . .

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)
turudu Hocam verdiğim kodda 15 gün gerisayım yaptırıyor. Ben bunu direkt bir tarihe gerisayım nasıl yaptırabilirim acaba?

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

Bunu nasıl belirli bir tarihe ayarlayabilirim?
 

 

wmaraci
wmaraci

turudu turudu WM Aracı Kullanıcı
  • Üyelik 24.07.2016
  • Yaş/Cinsiyet 40 / E
  • Meslek Yazılım Geliştirme Uzmanı
  • Konum İstanbul Avrupa
  • Ad Soyad L** T**
  • Mesajlar 165
  • Beğeniler 2 / 55
  • Ticaret 0, (%0)
Durotan kusura bakmayın sizin konunuzu biraz dağıttık.

Ben koda tekrar baktım ve http://i.share.pho.to/a92020bd_o.png adresindeki sonucu aldım. Saat yüzünden gün farklı oluşabilir. Onu siz istediğinize göre ayarlayabilirsiniz. GMT değerleri ile alakalı da olabilir. Sunucunun bulunduğu lokasyon da önemlidir.
Durotan

kişi bu mesajı beğendi.

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)
Çok teşekkürler turudu hocam. Şu an tam istediğim gibi oldu. Bir de CSS ile kendime uyarladım mı tadından yenmez.
 

 

Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al