Onlayn taymer müxtəlif hadisələrdən əvvəl vaxtı izləməyə imkan verəcək - hətta yumurta qaynatsa belə. Geri sayım taymeri ilə siz mütləq doğru anı qaçırmayacaqsınız.

Taymer qurmaq üçün siz “Taymeri təyin et” düyməsini sıxmalı və açılan pəncərədə tələb olunan vaxtı (saat, dəqiqə və saniyə) təyin etməli və ya taymerin işləməsi üçün xüsusi tarix və vaxtı təyin edə bilərsiniz. bir neçə gündən sonra yanğın. Göstərilən vaxt gələndə səslə bildirmək lazımdırsa, siyahıdan istədiyiniz melodiyanı seçin (hər melodiyaya qulaq asa bilərsiniz). Siz həmçinin geri sayım taymeri işə salındıqda ekranda göstəriləcək mesajı təyin edə bilərsiniz. Bütün lazımi məlumatları göstərdikdən sonra onlayn taymeri işə salmaq üçün “Başlat” düyməsini sıxın.

Unutmayın ki, səsli onlayn taymerin kompüterinizdə və ya telefonunuzda işləməsi üçün dinamikin səsi açılmalıdır (telefonunuzda “Media” səsinin istədiyiniz səviyyəyə qoyulduğundan əmin olmalısınız)! Əgər melodiya çalmağa ehtiyac yoxdursa, "Taymer zəngi" qutusunun işarəsini silə bilərsiniz. Bu halda yalnız mesaj göstəriləcək.

Onlayn taymerin düzgün işləməsi üçün daimi İnternet bağlantısına ehtiyac YOXDUR, lakin brauzer qapalı olduqda və ya kompüter söndürülüb/yuxu rejimində olarsa, o, işləməyəcək.

Bu yazıda bir neçə taymer variantına baxacağıq.

Seçim 1.
Yalnız dəqiqə və saniyə istifadə edən sadə taymer



Taymerin görünməsi üçün elementə taymer identifikatorunu verməli və etiketə şərt əlavə etməlisiniz

Budur, taymer hazırdır.

Seçim 2.
Taymer üçün rəqəmlər şəkil olacaq. Həmçinin bu taymerdə dəqiqə və saniyələrə əlavə olaraq saatlar və günlər mövcuddur. Taymerimiz müəyyən bir günə qədər geri sayacaq.

Səhifənin dizaynı


Geri sayım taymeri




Vaxtı göstərmək üçün digits2_orange.png şəkli istifadə olunacaq

Sonra js kodunu yazırıq



var t=Tarix.parse(son tarix)-Tarix.parse(yeni Tarix());
var saniyə = Math.floor((t/1000) % 60);
var dəqiqə = Math.floor((t/1000/60) % 60);
var saat = Math.floor((t/(1000*60*60)) % 24);
var gün = Math.floor(t/(1000*60*60*24));

$(funksiya())(
$("#sayğac").geri sayma((
şəkil: "pic/digits2_orange.png",
startTime: gün+":"+saat+":"+dəqiqə+":"+saniyə,
timerEnd: funksiya())(
$("#tut").html("Taymer öz işini tamamladı");
}
});
});
image - bizim şəkil
startTime tam olaraq 09/01/2017 tarixinə qalan vaxtdır
timerEnd - bizim vəziyyətimizdə taymer bitdikdə nə baş verir, tut identifikatoru ilə konteynerə müvafiq yazı daxil ediləcək;
Növbəti taymerimizdir

Sol:


GünlərSaatlarDəqiqələrSaniyələr






Biz rəsmiləşdiririk
#qat(
eni: 600px;
mətnin düzülməsi:mərkəz;
marja: 0 avtomatik;)

#sayğac(
kənar: 10pt avtomatik 0 avtomatik;
eni: 414px;)

azaldın(
eni: 430px;
kənar: 0px avtomatik;)

#günlər,#saatlar,#dəqiqələr,#saniyələr(
float:sol;
şrift:13px Arial,Verdana,sans-serif;
eni: 50px;
sağ kənar: 63px;
font-weight:qalın;
rəng:#000;)

#saniyə(sağdan kənar:0px;)

CntSeparator(
font ölçüsü: 50px;
kənar: 6px 7px;
rəng:#000;)
Seçim 3.
Fikrimizcə, ən əlverişlidir. Əvvəlki kimi, qalan günlərin, saatların, dəqiqələrin, saniyələrin sayını göstərir. Sayğacı göstərmək üçün təsvirdən istifadə etmir.
İşləmək üçün bizə jQuery kitabxanası və fayl lazımdır

Səhifənin dizaynı


Geri sayım taymeri

// burada istədiyiniz tarix yyyy-aa-gg ss:dd:ss formatındadır
var son tarix="2017-08-20 00:00:00";

• 
  00
  günlər
  


• 
  00
  izləmək
  


• 
  00
  min
  


• 
  00
  san
  

$(".geri sayma").downCount((
tarix: son tarix
},
funksiya())(
/* taymer bitdikdən sonra hərəkət */
alert("Vaxt bitdi!");
});


Və üslub üçün css görünüş
.geri sayma(
siyahı tərzi: heç biri;
haşiyə: 6px 0 0 0;
doldurma: 0;
ekran: blok;)

Geri sayım li(ekran: inline-block;)

/* burada günlər, saatlar, dəqiqələr, saniyələr var */
.geri sayım li span(
eni: 100%;
rəng:#000;
şrift:18px Verdana;
ekran:daxili blok;)

/* ayırıcılar. Və: */
.geri sayma li.seperator (
rəng:#000;
şrift:16px Verdana;
şaquli düzləşdirmə:yuxarı;)

Geri sayım li div(
marja: 0;
rəng: #a7abb1;
şrift:8pt Verdana;)

Tabata taymerini mağazada ayrıca cihaz kimi almaq, onlayn istifadə etmək və ya smartfonda proqram kimi quraşdırmaq olar (məsələn, Android üçün, iPhone üçün). Onlayn versiya Bu rahatdır, çünki heç bir şey quraşdırmaq lazım deyil, hər şey sadə və aydındır.

Interval taymerindən necə istifadə etmək olar:

İstədiyiniz elementi seçdikdən sonra interval vaxtı - və + düymələri ilə dəyişdirilə bilər:

Hazırlıq - standart 10 san. Bu, kompüterdən uzaqlaşmaq və məşqinizə hazırlaşmaq üçün lazım olan vaxtdır.

İş - standart 20 saniyədir. Bu məşqləri etmək vaxtıdır.

İstirahət - standart 10 san. Bu dövrlər arası istirahət vaxtıdır.

Turlar - standart 8-dir. Bu, yanaşmaların sayıdır (iş + istirahət).

Dövrlər - standart 1-dir. Bu, 8 raundun dövrələrinin sayıdır. Vaxt keçdikcə 3-4 dövrə qədər artırın. Dövrlər arasında adətən 1 dəqiqə istirahət edirsiniz. Dövrlər arasında istirahət vaxtı "Hazırlıq" bəndində müəyyən edilir.

Musiqili interval taymerinin video versiyası:

Ən sadə və ən rahat geri sayım taymeri

HTML Geri Sayım Saatı Günlər Saatlar Dəqiqələr Saniyələr CSS gövdəsi( text-align: center; fon: #00ecb9; font-family: sans-serif; font-weight: 100; ) .Countdown-title (rəng: #396; font-weight: 100; font-size: 40px; margin) : 40px 0px 20px; ) .geri sayım ( şrift ailəsi: sans-serif; rəng: #fff; displey: inline-block; şrift çəkisi: 100; mətnin düzülməsi: mərkəz; şrift ölçüsü: 30px; ) .geri sayım- sayı ( padding: 10px; haşiyə radiusu: 3px; fon: #00bf96; displey: inline-block; ) .geri hesablama vaxtı (doldurma: 15px; sərhəd radiusu: 3px; fon: #00816a; ekran: inline-block; ) .Countdown-text ( displey: blok; padding-top: 5px; font-size: 16px; ) Javascript funksiyası getTimeRemaining(endtime) ( var t = Date.parse(endtime) - Date.parse(yeni Tarix()); var saniyə = Math.floor((t / 1000) % 60 var dəqiqə = Math.floor((t / 1000 / 60) % 60 var saat = Math.floor((t / (1000 * 60 * 60). ) )) % 24); var gün = Math.floor(t / (1000 * 60 * 60 * 24) qayıt ( "cəmi": t, "günlər": gün, "saat": saat, "dəqiqə" : dəqiqə, "saniyə": saniyə ); ) funksiyası initializeClock(id, endtime) ( var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = saat. querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds" updateClock() ( var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0"); + t.saat).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2)Span.innerHTML = ("0" + t.seconds).slice(-2). əgər (t.total proTimer (pullu))

Ödənişli geri sayma taymer generatoru. Qiymət: 1 taymer üçün 48 RUR/ay və ya istənilən sayda taymer üçün 199 RUR/ay.

Yeddi dizayn, üç ölçü, on üç rəng. Redaktə paneli. Ağıllı parametrlər. Test üçün demo versiyası var. Kodun miqdarı azdır. Skript xidmət tərəfində işləyir.