İnternet üzerinden zamanlayıcı çeşitli etkinliklerden önceki zamanı ölçmenize izin verir - yumurta kaynıyor olsa bile. Geri sayım sayacı ile kesinlikle doğru anı kaçırmayacaksınız.

Zamanlayıcıyı ayarlamak için, "Zamanlayıcıyı ayarla" düğmesine tıklamanız ve açılan pencerede gerekli zamanı (saat, dakika ve saniye) belirtmeniz gerekir veya zamanlayıcının birkaç gün içinde çalışması için belirli bir tarih ve saat belirtmeyi seçebilirsiniz. Belirtilen zamanda sesli bildirim yapmanız gerekiyorsa, listeden istediğiniz melodiyi seçin (her melodiyi dinleyebilirsiniz). Ayrıca tetiklendiğinde ekranda gösterilecek bir mesaj da belirtebilirsiniz. geri sayım saati... Gerekli tüm bilgileri belirledikten sonra, çevrimiçi zamanlayıcıyı başlatmak için "Başlat" a basın.

Bunu tetiklemek için hatırla çevrimiçi zamanlayıcı bir bilgisayar veya telefonda ses olduğunda, hoparlör sesi açık olmalıdır (telefonda, "Medya" sesinin gerekli seviyeye ayarlandığından emin olun)! Bir melodi çalmanız gerekmiyorsa, "Zamanlayıcı araması" kutusunun işaretini kaldırabilirsiniz. Bu durumda, sadece mesaj belirtilecektir.

Zamanlayıcının çevrimiçi olarak doğru çalışması için Gerek yok kalıcı bir İnternet bağlantısında, ancak Çalışmayacaktarayıcı kapalıysa veya bilgisayar kapalıysa / hazırda bekletiliyorsa.

Sunulan araç çerçevesinde, kronometrenin farklı modları çevrimiçi olarak uygulanmaktadır:

  • Kronometre - canlı geri sayım
  • Sesli geri sayım sayacı
  • Aralık Zamanlayıcısı

Örneğin kalp atış hızınızı ölçmek, resmi olmayan spor başarılarını kaydetmek veya standartları geçmek için ücretsiz bir kronometre kullanılabilir. Pazarlamacılar ve testçiler için, bir sitenin veya uygulamanın kullanılabilirliğini kontrol ederken (kullanılabilirlik değerlendirmesi) zamanlama açısından çevrimiçi bir kronometre yararlı olabilir. Geri sayım, örneğin silahların veya bir Rubik küpünün montajı ve sökülmesi gibi eğitim için kullanılabilir.

Kronometrenin veya geri sayım sayacının başlangıç \u200b\u200bayarları doğrudan arayüzde yapılır, sadece sayılara tıklayın ve istenen değeri ayarlayın.

Antrenmanlar için aralık zamanlayıcı

Kondisyon Zamanlayıcısı, Tabata ve dinlenme ve yüksek yoğunluklu çalışma arasında değişen diğer aralıklı antrenmanlar için aralıkları ayarlamak için kullanılabilir. Çalışma ve dinlenme aralıklarını ayarlayarak, daire sayısını (tekrarlar) ayarlayarak desteklenir.

Kronometre çevrimiçi ve ücretsizdir. Zamanlayıcıda geri sayımı 30 saniye, 1, 2 dakika veya herhangi bir zaman için ayarlayabilirsiniz. Programı bilgisayarınıza indirmenize veya uygulamayı telefonunuza yüklemenize gerek yoktur Çevrimiçi zamanlayıcı hizmeti, İnternet üzerinden uygun bir zamanda ve yerde kullanılabilir.

Tabata zamanlayıcı bir mağazadan ayrı bir cihaz olarak satın alınabilir, çevrimiçi olarak kullanılabilir veya bir akıllı telefona uygulama olarak yüklenebilir (örneğin, Android için, Iphone için). Çevrimiçi sürüm kullanışlıdır çünkü hiçbir şey yüklemenize gerek yoktur, her şey basit ve nettir.

Aralık zamanlayıcı nasıl kullanılır:

Aralık süreleri düğmeleri kullanılarak değiştirilebilir - ve + istenen öğeyi seçtikten sonra:

Hazırlık - varsayılan 10 saniye... Bu, bilgisayardan uzaklaşıp antrenmanınıza hazırlanmanız için gereken zamandır.

İş - varsayılan olarak ayarla 20 saniye... Bu egzersiz zamanı.

Rahatlama - varsayılan 10 saniye... Bu turlar arasındaki dinlenme süresidir.

Mermi - varsayılan olarak ayarla 8 ... Bu, yaklaşım sayısıdır (çalışma + dinlenme).

Döngüleri - varsayılan olarak ayarla 1 ... Bu, 8 turluk daire sayısıdır. Zamanla 3-4 döngüye yükseltin. Dinlenme genellikle döngüler arasında 1 dakika yapılır. Döngüler arasındaki dinlenme süresi "Hazırlık" öğesinde ayarlanır.

Aralıklı zamanlayıcının müzikli video versiyonu:

En kolay ve en uygun geri sayım sayacı

HTML

Geri sayım saati

Günler
Saatler
Dakika
Saniye

CSS

gövde (metin hizalama: merkez; arka plan: # 00ecb9; yazı tipi ailesi: sans-serif; yazı tipi ağırlığı: 100;). geri sayım başlığı (renk: # 396; yazı tipi ağırlığı: 100; yazı tipi boyutu: 40px; margin: 40px 0px 20px;). geri sayım (font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px;). geri sayım -number (padding: 10px; border-radius: 3px; background: # 00bf96; display: inline-block;) .countdown-time (padding: 15px; border-radius: 3px; background: # 00816a; display: inline-block ;). geri sayım metni (display: block; padding-top: 5px; yazı tipi boyutu: 16px;)

Javascript

function getTimeRemaining (endtime) (var t \u003d Date.parse (endtime) - Date.parse (new Date ()); var seconds \u003d Math.floor ((t / 1000)% 60); var minutes \u003d Math.floor (( t / 1000/60)% 60); var hours \u003d Math.floor ((t / (1000 * 60 * 60))% 24); var days \u003d Math.floor (t / (1000 * 60 * 60 * 24) ); return ("toplam": t, "gün": gün, "saat": saat, "dakika": dakika, "saniye": saniye);) function initializeClock (id, endtime) (var clock \u003d document.getElementById (id); var daysSpan \u003d clock.querySelector (". days"); var hoursSpan \u003d clock.querySelector (". hours"); var minutesSpan \u003d clock.querySelector (". minutes"); var secondsSpan \u003d clock.querySelector ( ".seconds"); function updateClock () (var t \u003d getTimeRemaining (endtime); daysSpan.innerHTML \u003d t.days; hoursSpan.innerHTML \u003d ("0" + t.hours) .slice (-2); minutesSpan.innerHTML \u003d ("0" + t.minutes) .slice (-2); secondsSpan.innerHTML \u003d ("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); // for endless timer initializeClock("countdown", deadline);

Zamanlayıcının bitiş tarihini belirtiyoruz

ISO 8601 tarih çıktı biçimi:

Var son tarih \u003d "2015-12-31";

Kısaltılmış biçim:

Var son tarihi \u003d "31.12.2015";

Uzun format:

Var son tarih \u003d "31 Aralık 2015";

Tam saat ve saat dilimi ile tarih göstergesi:

Değişken son tarih \u003d "01 Ocak 2018 00:00:00 GMT + 0300";

Açılış sayfaları için zamanlayıcı ekranı - zamanlayıcı, kalan 15 günün kaldığı her zamanı gösterecektir (istediğiniz zamanı belirtebilirsiniz)

Değişken son tarih \u003d yeni Tarih (Tarih.parse (yeni Tarih ()) + 15 * 24 * 60 * 60 * 1000);

Geri Sayım Sayacının Çalışma Örneği

Zamanlayıcıyı süre bittikten sonra gizleriz ve sürenin dolduğunu belirten bir mesaj görüntüleriz.

Bu çözüm, yorumlarda Igor tarafından önerildi.

HTML'ye mesaj içeren bir blok ekle

Zaman doldu!

Aşağıdaki stilleri CSS'ye ekleyin:

Son tarih mesajı (ekran: yok; yazı tipi boyutu: 24px; yazı tipi stili: italik;) .visible (ekran: blok;) .hidden (ekran: yok;)

Komut dosyasında, timer başlatma işlevini değiştiririz initializeClock (id, endtime) (...), gerisini olduğu gibi bırakırız:

Function initializeClock (id, endtime) (var clock \u003d document.getElementById (id); var daysSpan \u003d clock.querySelector (". Days"); var hoursSpan \u003d clock.querySelector (". Hours"); var minutesSpan \u003d clock.querySelector (".minutes"); var secondsSpan \u003d clock.querySelector (". seconds"); function updateClock () (var t \u003d getTimeRemaining (endtime); if (t.total<= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-message").className = "visible"; clearInterval(timeinterval); return true; } 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); } updateClock(); var timeinterval = setInterval(updateClock, 1000); }

Bu işlevde değişen şey, zamanlayıcının süresi dolduğunda ,.hidden sınıfının zamanlayıcının kendisine eklenmesi (zamanlayıcıyı gizlemesi) ve .visible sınıfının zamanın sonuyla ilgili mesajda asılı kalması (mesajı görüntüler) ve ayrıca clearInterval (zaman aralığı ); ... Ve zaman birimlerinin çıktısı, zamanın geçip geçmediğini kontrol ettikten sonra yerleştirilir.

Zaman Aşımı Mesajı ile Geri Sayım Sayacının Çalışma Örneği

Düğmeye bas Yeniden çalıştırher şeyin olması gerektiği gibi çalıştığından emin olmak için.

Yeniden başlatmalı geri sayım sayacı

Zamanlayıcının özü, süre dolduğunda zamanlayıcının durmaması, hiçbir mesaj gösterilmemesi, sadece yeni bir geri sayım başlatmasıdır:

Zamanlayıcı 5 saniyeye ayarlandı ve sürenin sonunda 5 saniye daha yeniden başlatılacak

İşlev getTimeRemaining (endtime) (var t \u003d Date.parse (endtime) - Date.parse (new Date ()); var seconds \u003d Math.floor ((t / 1000)% 60); var minutes \u003d Math.floor (( t / 1000/60)% 60); var hours \u003d Math.floor ((t / (1000 * 60 * 60))% 24); var days \u003d Math.floor (t / (1000 * 60 * 60 * 24) ); return (toplam: t, gün: gün, saat: saat, dakika: dakika, saniye: saniye);) function initializeClock (id, endtime) (var clock \u003d document.getElementById (id); var daysSpan \u003d clock.querySelector (".days"); var hoursSpan \u003d clock.querySelector (". hours"); var minutesSpan \u003d clock.querySelector (". minutes"); var secondsSpan \u003d clock.querySelector (". seconds"); function updateClock () (var t \u003d getTimeRemaining (bitiş zamanı); if (t.total<= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); } 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); } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline);

Sadece bu kodun değiştirilmesinde zamanın sonu hakkında mesajın çıktısı ile seçenek arasındaki JS kodundaki fark

Eğer (t.toplam<= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-messadge").className = "visible"; clearInterval(timeinterval); return true; }

Eğer (t.toplam<= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); }

Zamanlayıcıyı sıfırlarken, yeni bir son tarih belirlememiz gerektiğini ve sondan bir önceki kod satırında belirtilen orijinal süreden tamamen farklı olabileceğini lütfen unutmayın:

Değişken son tarih \u003d yeni Tarih (Tarih.parse (yeni Tarih ()) + 5 * 1000);

Zamanlayıcıları hatırlayın "Yeni Yıla _ gün _ saat _ dakika kaldı?" Bugün, geri sayım sayacı harika bir pazarlama aracına dönüştü - sayaçlar çevrimiçi mağazaların açılış sayfalarında, satış sayfalarında veya açılış sayfasındadır. "Promosyonun bitimine 5 gün, 15 saat, 40 dakika kaldı" veya "İndirimin başlamasına 7 saat, 15 dakika, 35 saniye kaldı". Elbette, zamanlayıcılar ziyaretçinin ilgisini "ısıtır", onu sitede hedeflenen eylemi gerçekleştirmeye teşvik eder, zamanı sınırlar ve aciliyet veya mal eksikliği etkisi yaratır.

Promosyonlarınız tek seferlikse veya kendi komut dosyalarınızı kurmanın teknik bir olasılığı yoksa, iki veya üç tıklamayla uygulanabilir geri sayım sayaçları hazırlayacak ücretsiz çevrimiçi oluşturucular vardır.

Çeşitli özelleştirme ve tasarım seçenekleri. Kod miktarı azdır. Komut dosyası hizmet tarafında çalışır.

jQuery geri sayım tarihi oluşturucu

İş örneği
100. yıl dönümüne kadar:

burada Tarih (2070,7,1,0,0,0) olayın tarihidir.

pro Zamanlayıcı (Ücretli)

Ücretli geri sayım sayacı jeneratörü. Maliyet - 1 zamanlayıcı için 48 ruble / ay veya herhangi bir zamanlayıcı için 199 ruble / ay.

Yedi tasarım, üç boyut, on üç renk. Düzenleme paneli. Akıllı ayarlar. Test için bir demo sürümü var. Kod miktarı azdır. Komut dosyası hizmet tarafında çalışır.