Geri Sayım (Countdown)

geri-sayim-countdown (büyük resim için tıklayın)

Bu gönderide; eylemin tetiklendiği zamana +2 dakika ekleyip geri sayım gerçekleştiren sayacın kod bloklarını paylaşıp açıklıyorum.

  •  
  • p {
  • text-align: center;
  • font-size: 60px;
  • }
  •  

Sayacın gösterileceği paragraf için doküman içi dahili stil kod blokları eklenir. Sonrasında dokümana, “demo" id değerine sahip paragraf eklenir ve script bloğu yazılır.

  •  
  •  
    • var countDownDate = new Date();
    • countDownDate.setMinutes(countDownDate.getMinutes()+2)
    • var x = setInterval(function() {
      • var now = new Date().getTime();
      • var distance = countDownDate - now;
      • var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      • var seconds = Math.floor((distance % (1000 * 60)) / 1000);
      • minutes==0 ? minutes="" : minutes+="d ";
      • if(seconds==0){
        • document.getElementById("demo").innerHTML =minutes;
      • }
      • else{
        • document.getElementById("demo").innerHTML =minutes + seconds + "s ";
      • }
  • if (distance < 1) {
  • clearInterval(x);
  • document.getElementById("demo").innerHTML = "BİTTİ";
  • }
  • }, 1000);
  •  

Script kod bloğunda new Date ile tarih bilgisi oluşturulur. oluşturulan tarihe setMinutes fonksiyonu ile, getMinutes fonksiyonundan alınan dakika bilgisine +2 parametresi verilerek tarihe +2 dakika eklenir. setInterval ile her 1 saniyede koşturulacak olan kod blokları yazılır. Bu kod bloğunda koşturulan zamanın milisaniye değeri alınır. Aradaki fark için; Bir önceki adımda +2 eklenen zamandan koşturulan zamanın milisaniye değeri çıkarılır. Elde edilen çıkarımın dakika ve saniye bilgileri, mod alma işleminin tabana yuvarlanması ile elde edilir ve paragraf bilgisine yazdırılır. Eğer elde edilen çıkarım 1'den (1 saniyeden) küçükse sayaç sonlandırılır ve paragrafa sonuç bilgisi yazılır.

Kaynakça => https://www.w3schools.com/howto/howto_js_countdown.asp

 

omurs

Ö S, 30 Ağustos 2018 Perşembe 15:30 tarihinde kayıt oldu

Beğeni

Toplam Beğeni Sayısı: 3


Yıllara Göre Gönderiler








LombokLoglamaB2C (Business-to-Consumer)B2B (Business-to-Business)İçerik Yönetim Sistemi - CMS (Content Management System)Pagination (Sayfalama)Sanal Özel Ağ - VPN (Virtual Private Network)Cronjob (Zamanlanmış Görevler)Printer-YazıcıJava'daki İlkel Veri Tipleri ve Alabilecekleri DeğerlerBit & Byte ve Hafıza Boyutlarındaki Ölçüm BirimleriSanallaştırma (Virtualization)DNS KayıtlarıE-Fatura ve E-ArşivYazılım Lisans TürleriAudit (Denetim) Açık Kaynak (Open Source)Monitoring (İzleme)Sitemap & Robots.txtKilometretaşı (Milestone)BSMV (Banka ve Sigorta Muameleleri Vergisi)KKDF (Kaynak Kullanımı Destekleme Fonu)Siber Pazartesi (Cyber Monday)Black Friday (Kara Cuma)Hotlink.htaccessCryptoLockerMalwareTrojanWormDependency (Yazılım Geliştirme Sürecinde Paket Bağımlılığı)Configuration (Yazılım Geliştirme Sürecinde Yapılandırma)Yahoo ve Yahoo'nun Başarısızlık NedenleriArchiving (Yazılım Geliştirme Sürecinde Arşivleme)Görsel Dosya Türleri (Image Types)ReleaseVersioning & Tagging (Versiyonlama ve Etiketleme)BuildJob (Yazılım Geliştirme Sürecinde Görevler)SonarQubeCDATA (Character Data)Alan Adı Uzantıları (Domain Name Extensions)Regresyon Kara Kutu (Black-Box) TestBeyaz Kutu (White-box) TestGri Kutu (Grey-box) TestYazılım Geliştirme Sürecindeki Temel Test TürleriKod gözden geçirme (Code Review)Birim Testi (Unit Testing)Yazılım Sürecinde EntegrasyonJAR & WAREager & Lazy Fetch TypeMaskelemeKPI (Key Performance Indicator)KII (Key Impact Indicator)Projenin JAR Dosyasını Oluştur - JAR PathSunucu için Linux dağıtım SeçimiKonyteynerler (container technologies)Runtime & Compile Time (Çalışma ve Derleme Zamanı)@Anotasyonlar (@Annotations)