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.
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
Geri sayım sayacı nasıl kullanılır ve kodları neler;
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
showSeconds: true, // satırını falseyapmanı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.
Dilersen yukarıdaki kod bloğunu kendine göre düzenleyebilirsin. 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.”
