Genel

Javascript geri sayım sayacı

Javascript geri sayım sayacı;
Merhaba uzun bir aradan sonra ufak bir paylaşım yaparak ihtiyacı olan arkadaşlar için flip countdown sayacını paylaşmak istedim. Bu sayaç ne yapar ne işe yarar diyenler için kısaca anlatmak isterim;
1. Düşünün bir sayfanız var ve belirli bir tarih sonra açılacak ve bunu geri sayım sayacı ile belirtmek istiyorsunuz kullanabilirsiniz
2. İndirim veya kampanya yaptınız bunu yayınlamak ve geri sayım ile bitiş tarihini belirtmek istiyorsunuz kullanabilirsiniz
gibi liste uzayıp gidebilir.

Bunu için size aktif olarak önerebileceğim ve hoşuma giden bir kütüphane olan flip clockjs kullanabilirsiniz. Kullanımı gayet basit olmak ile beraber en büyük sorunu responsive uyumluluk sorunudur.

Kodlarımız

Gelelim nasıl kullanılır kodları nedir;

css ;

<link rel="stylesheet" href="plugins/flipclock/flipclock.css"/>
</style>
@media screen and (max-width: 320px) {
            .zaman {
            position: absolute;
                top: 35%;
                font-weight: bold;
                /*background: rgba(255, 255, 255, 0.59);*/
                z-index: 99;
                width: 93%;
                left: 2px;
            }
            .flip-clock-wrapper ul {
                margin: 2px !important;
            }
        }
        @media screen and (max-width: 360px) {
            .zaman {
            position: absolute;
                top: 35%;
                font-weight: bold;
                /*background: rgba(255, 255, 255, 0.59);*/
                z-index: 99;
                width: 93%;
                left: 2px;
            }
            .flip-clock-wrapper ul {
                margin: 2px !important;
            }
        }
        @media screen and (max-width: 640px) {
            .zaman {
            position: absolute;
                top: 35%;
                font-weight: bold;
                /*background: rgba(255, 255, 255, 0.59);*/
                z-index: 99;
                width: 93%;
                left: 2px;
            }
            .flip-clock-wrapper ul {
                margin: 2px !important;
            }
        }
        @media (min-width: 640px) and (max-width:768px) {
            .zaman {
            position: absolute;
                top: 35%;
                font-weight: bold;
                /*background: rgba(255, 255, 255, 0.59);*/
                z-index: 99;
                width: 93%;
                left: 57px;
            }
            .flip-clock-wrapper ul {
                margin: 2px !important;
            }
        }
        @media (min-width: 768px) and (max-width:1280px) {
            .zaman {
            position: absolute;
                top: 35%;
                font-weight: bold;
                /*background: rgba(255, 255, 255, 0.59);*/
                z-index: 99;
                width: 93%;
                left: 57px;
            }
            .flip-clock-wrapper ul {
                margin: 2px !important;
            }
        }
        @media (min-width: 1280px){
            .zaman {
            position: absolute;
                font-weight: bold;
                left: -6px;
                position: absolute;
                top: 32%;
                width: 104%;
                z-index: 99;
            }
            .flip-clock-wrapper ul {
                margin: 2px !important;
            }
        }
        @media (min-width: 1400px) and (max-width: 1700px){
            .zaman {
                position: absolute;
                top: 37%;
                font-weight: bold;
                /*background: rgba(255, 255, 255, 0.59);*/
                z-index: 99;
                width: 93%;
                left: 22px;
            }
        }
        @media (min-width: 1700px) and (max-width: 2000px){
            .zaman {
                position: absolute;
                top: 37%;
                font-weight: bold;
                /*background: rgba(255, 255, 255, 0.59);*/
                z-index: 99;
                width: 93%;
                left: 10%;
            }
        }
</style>

js ;
<script>
var clock;
        $(document).ready(function() {
            var clock;

            clock = $('.zaman').FlipClock({
                clockFace: 'DailyCounter',
                autoStart: false,
                language: 'de',
                callbacks: {
                    stop: function() {
                        //$('.message').html('The clock has stopped!')
                    }
                }
            });
            clock.setTime(Date.gunfark('20-2-2017'));
            clock.setCountdown(true);
            clock.start();

        });
        Date.gunfark    = function(bitisTarihi)
        {
            var sp      =   bitisTarihi.split('-')
            var date    =   new Date();
            var bugun   =   new Date(date.getFullYear(), date.getMonth() ,date.getDate(), date.getHours(), date.getMinutes());
            var bitis   =   new Date(sp[2],(sp[1]-1),sp[0]);
            var timeDiff=   Math.abs(bugun.getTime() - bitis.getTime());
            var diffDays=   Math.ceil(timeDiff / (1000));
            return diffDays;
        }
</script>

html;
<div class="zaman"></div>;

Laravel kullanıcıları için isterse ;

<div class="col-md-3 acKutuyu md-trigger" data-modal="modal-1">            @if(Carbon\Carbon::now()->format('Y-m-d') > '2017-02-20')                <img src="{!! asset('images/mint-olympics-ikon.jpg') !!}" class="img-responsive md-trigger" style="max-height:331px;"/><div class="zaman"></div> @else <img src="{!! asset('images/sonlandi.jpg') !!}" class="img-responsive md-trigger" style="max-height:331px;"/>            @endif</div>

Yukarıdaki laravel veya html kodlarını kullanarak sitenize güzel bir geri sayım sayacı koyabilirsiniz. Date.gunfark fonksiyonu flip clock sayin bazında hesaplama yaptığı için bizim gireceğimiz gün farkını hesaplayarak geri sayımı başlatıyor. Saniye göstermek istemez iseniz flipclock.js içinde bulunan

[code]
showSeconds: true, // satırını false
[/code]

yapmanız yeterli olacaktır. Javascript geri sayım sayacı sayfanıza renk katsın.

Javascript geri sayım sayacı?

Geri sayım sayacı kullanmanın asıl amacı e-ticaret sitelerinde ürüne yapılan kampanya veya ürünün raftan kaldırılacağı tarihi belirtmek veya doğum günleri için kalan gün sayısı veya bir sitenin ne kadar süre sonra aktif olacağını belirtmek için kullanılmaktadır.

Bu yazımda flipcount ile beraber laravel sistemini entegre edebileceğiniz basirt bir kod bloğu paylaştım. Yukarıdaki kodu istediğiniz gibi derleyip farklı div isimleri verilerek database bağlanarak sistemi otomatiğe alabilrsiniz.

Sizde kendi isteğiniz doğrultusunda yukarıdaki kod bloğunu geliştirebilir Laravel kullanmadan basit bir html ile bağlantı sağlayabilir farklı konseptler için kullanabilirsiniz. Unutmayınki bozmadan kurcalamadan kendimizi geliştirmek doğru sonuca ulaşmak mümkün olmayacaktır.

Albert Einstein’dan “Delilik: Aynı şeyleri tekrar tekrar yapıp farklı sonuçlar beklemek.”

Bunu Oyla post

Leave a Comment

Your email address will not be published.

You may also like

%d blogcu bunu beğendi: