Biror narsa uchun sizga biror narsa kerak bo'ladi sanash taymeri, Internetda ko'plab echimlar bor, lekin ular juda og'ir yoki boshqa kutubxonalarga bog'liq. Bugun biz ko'rib chiqamiz Javascriptda 18 ta kod satrida hisoblagich taymerini qanday qilish kerak.

Reja

• Qolgan vaqtni hisoblang

To'g'ri tugash sanasini belgilang

Birinchidan, siz tugash sanasini to'g'ri belgilashingiz kerak. Bu tushunadigan har qanday formatdagi satr bo'ladi Sana.parse () usul. Masalan:

Qabul qilish muddati = "2015-12-31";

Qisqa format

Belgilangan muddat = "31.12.2015";

Yoki uzun format

Var muddati - "2015 yil 31 -dekabr";

Ushbu formatlarning har biri aniq vaqtni (soat, daqiqa, soniya) va vaqt mintaqasini belgilash imkonini beradi. Masalan:

Qabul qilish muddati = "2015 yil 31 dekabr 23:59:59 GMT + 02: 00";

Qolgan vaqtni hisoblang

GetTimeRemaining funktsiyasi (tugash vaqti) (
var t = Date.parse (endtime) - Date.parse (new Date ());
var seconds = Math.floor ((t / 1000)% 60);
var minutes = Math.floor ((t / 1000/60)% 60);
var hours = Math.floor ((t / (1000 * 60 * 60))% 24);
var days = Math.floor (t / (1000 * 60 * 60 * 24));
qaytish (
"jami": t,
"kunlar": kunlar,
"soat": soat,
"daqiqa": daqiqa,
"soniya": soniya
};
}

Birinchidan, biz o'zgaruvchini yaratamiz t qolgan vaqtni saqlash uchun. Sana.parse () usuli o'rnatilgan javascript va sizga vaqtni millisekunddagi qiymatga aylantirish imkonini beradi. Bu bizga bir vaqtni ikkinchisidan olib tashlash va ular orasidagi farqni olish imkonini beradi.

Var t = Date.parse (endtime) - Date.parse (new Date ());

Sanani qulay formatga keltiring

Endi biz millisekundlarni kun, soat, daqiqa va soniyalarga aylantirmoqchimiz. Misol sifatida soniyadan foydalanaylik:

Var soniyalar = Math.floor ((t / 1000)% 60);

Keling, bu erda nima bo'layotganini aniqlaylik.

• Millisekundlarni soniyalarga aylantirish uchun 1000 ga bo'ling
• Bo'lmoq umumiy soni soniya 60 ga, qolganini saqlang - sizga barcha soniyalar kerak emas, faqat daqiqalardan keyin qolganlari hisoblangan.
• Eng yaqin butun songa aylantiring, chunki siz ularning sonini emas, balki sonini xohlaysiz

Millisekundlarni daqiqa, soat va kunlarga aylantirish uchun bu mantiqni takrorlang.

Qayta foydalanish mumkin bo'lgan ob'ekt sifatida taymer ma'lumotlari

Soatlar, daqiqalar va soniyalar tayyor bo'lganda, biz ularni qayta ishlatiladigan ob'ekt sifatida qaytarishimiz kerak.

Qaytish (
"jami": t,
"kunlar": kunlar,
"soat": soat,
"daqiqa": daqiqa,
"soniya": soniya
};

Bu ob'ekt sizning funktsiyangizga qo'ng'iroq qilish va har qanday hisoblangan qiymatlarni olish imkonini beradi. Qolgan daqiqalarni qanday olish mumkinligi haqidagi misol:

GetTimeRemaining (oxirgi muddat). Daqiqa

Qulay, to'g'rimi?

Sahifada soatni ko'rsatish va nolga yetganda uni to'xtatish

Endi bizda qolgan kunlar, soatlar, daqiqalar va soniyalarni qaytaradigan funksiya mavjud. Biz o'z taymerimizni qura olamiz. Birinchidan, quyidagilarni yarating html soat tuzilishi:

Keyin bizning ichimizdagi ma'lumotlarni ko'rsatadigan funktsiyani yozing div "a:

InitializeClock funktsiyasi (id, oxirgi vaqt) (
var soat = document.getElementById (id);
var timeinterval = setInterval (function () (


" +
"soat:" + t.soat + "
" +
"daqiqa:" + t.minutes + "
" +
"seconds:" + t.sekund;

}
},1000);
}

Bu funktsiya ikkita parametrni oladi: id bizning soatimiz va hisoblagichning tugash vaqti bo'lgan element. Funktsiyaning ichida biz o'zgaruvchini e'lon qilamiz soat va biz undan soat blokiga havolani saqlash uchun foydalanamiz, shuning uchun bizdan so'rashning hojati yo'q DOM.

• Qolgan vaqtni hisoblang
• Qolgan vaqtni bizda ko'rsating div
• Agar qolgan vaqt = 0 bo'lsa, soatni to'xtating

Faqat soatni shunday boshlash kerak:

InitializeClock ("clockdiv", oxirgi muddat);

Tabriklaymiz! Endi sizda bor oddiy hisoblagich 18 da javascript satrlari kod.

Soatingizni ko'rgazmaga tayyorlang

Stylingdan oldin biz bir nechta narsalarni takomillashtirishimiz kerak.

• Taymer darhol ko'rsatilishi uchun dastlabki kechikishni olib tashlang
• Soat skriptini yanada samaraliroq qiling, shunda siz butun soatni doimiy ravishda qayta tiklamaysiz
• Nollarni xohlaganingizcha qo'shing

Dastlabki kechikishni olib tashlash

Biz soatlarda foydalanamiz setInterval displeyni har soniyada yangilab turish. Ko'pincha bu odatiy holdir, boshlanishidan tashqari, 1 soniya kechikish. Buni tuzatish uchun biz soatni bir marta yangilashimiz kerak setInterval ishga tushadi.

Buning uchun biz o'tadigan anonim funktsiyani ko'chiramiz setInterval(soatni har soniyada yangilab turadigan) biz uni alohida funktsiyaga aylantiramiz updateClock... Bu funktsiyani tashqarida bir marta chaqiring setInterval va keyin uni yana ichkariga chaqiring setInterval... Shunday qilib, soat kechiktirmasdan ko'rsatiladi.

Sizning javascript Buni o'zgartiring:

Vaqt oralig'i = setInterval (funktsiya () (...), 1000);

UpdateClock () funksiyasi
var t = getTimeRemaining (tugash vaqti);
clock.innerHTML = "kunlar:" + t.days + "
" +
"soat:" + t.soat + "
" +
"daqiqa:" + t.minutes + "
" +
"seconds:" + t.sekund;
if (t.total clearInterval (vaqt oralig'i);
}
}

UpdateClock (); // kechikishni oldini olish uchun funktsiyani bir marta ishga tushiring
var timeinterval = setInterval (updateClock, 1000);

Skriptni yanada samarali qilish

Skriptni yanada samaraliroq qilish uchun biz barcha soatlarni yangilashimiz shart emas, faqat raqamlar. Buning uchun har bir raqamni tegga qo'ying oraliq va faqat bu tarkibni yangilaydi.

Bu yerda html:

Var daysSpan = clock.querySelector (". Days");
var hoursSpan = clock.querySelector (". soat");
var minutesSpan = clock.querySelector (". daqiqa");
var secondsSpan = clock.querySelector (". soniya");

UpdateClock () funksiyasi
var t = getTimeRemaining (tugash vaqti);

DaysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.sekund;

...
}

Etakchi nollarni qo'shing

Agar siz etakchi nollarni xohlasangiz, kodni shunday o'zgartirishingiz mumkin:

SecondsSpan.innerHTML = t.sekund;

Bu haqda:

SecondsSpan.innerHTML = ("0" + t.sekundlar) .slim (-2);

Xulosa

Biz ko'rib chiqdik Qanday qilib oddiy JavaScript hisoblagich taymerini yasash mumkin... Siz uchun faqat uslublarni qo'shish qoladi. E'tibor uchun rahmat!

Xayrli kun, hammaga.
PHP -da taymerni o'tkazishga harakat qilaylik
Ehtimol, ko'p odamlar savol berishgan:
1. Mening skriptim qancha vaqtni oladi.
2. Sahifa qancha ishlab chiqariladi (uni ko'plab saytlarda ko'rishingiz mumkin).

Shunday qilib, ketaylik.

Keling, taymerimizni OOPda, ya'ni sinf g'oyasida yaratamiz va Taymer sinfining nomini beramiz:

Sinf taymeri ()

Va biz darhol sinf uchun konstruktor yaratamiz, shunda biz taymer ma'lumotlarini qandaydir tarzda chaqira olamiz (bu asosan protsessorlar uchun kerak) va biz taymer natijalarini saqlaydigan o'zgaruvchini yaratishimiz kerak.
Mana shunday kod chiqadi:

$ timeTimer = qator ();

Sinf taymeri (
shaxsiy $ id;

$ this -> id = $ id;
}
}

Va darhol taymerni ishga tushirish, to'xtatish va joriy qiymatni chiqarish uchun funktsiyalarni yarataylik:

ClassTimer (
shaxsiy $ id;

/ * Taymer funksiyasini ishga tushirish * /
funktsiyani ishga tushirish () (
global $ timeTimer; // global o'zgaruvchiga murojaat qilish uchun
$ mtime = microtime (); // joriy vaqtni soniya va millisekundlarda bilib oling

$ mtime = $ mtime + $ mtime;
$ timeTimer [$ this -> id] ["start"] = $ mtime; // natijani global o'zgaruvchiga qo'ying
}

Funktsiyani to'xtatish () (
global $ timeTimer;
$ mtime = mikrotime ();
$ mtime = portlash ("", $ mtime);
$ mtime = $ mtime + $ mtime;
$ timeTimer [$ this -> id] ["stop"] = $ mtime;
$ timeTimer [$ this -> id] ["result"] = $ mtime -$ timeTimer [$ this -> id] ["start"];
}

Get funktsiyasi ($ rand = 5) (
global $ timeTimer;
if ($ timeTimer [$ this -> id] ["result"]) $ timeTimer [$ this -> id] ["result"] ni qaytarish;
$ mtime = mikrotime ();
$ mtime = portlash ("", $ mtime);
$ mtime = $ mtime + $ mtime;
qaytish davri ($ mtime - $ timeTimer [$ this -> id] ["start"], $ rand);

__Construct funktsiyasi ($ id = "") (
if (! $ id) (trigger_error ("Noto'g'ri parametr kiritish", E_USER_WARNING);)
if ($ timeTimer [$ id]) (trigger_error ("Taymerni ishga tushirib bo'lmaydi", E_USER_WARNING);)
$ this -> id = $ id;
}
}

O'ylaymanki, sinfning o'zida muammolar yo'q. Taymerni ishga tushirishgina qoladi:

$ taymer = yangi taymer ("test"); // "test" nomli taymer yarating
$ taymer -> boshlash (); // taymerni ishga tushirish
$ taymer -> to'xtatish (); // taymerni to'xtatish

Bu kod natijasida biz juda kichik qiymatga ega bo'lamiz !!!
Keling, qandaydir tarzda tizimni yuklashga harakat qilaylik. Siz pastadirdan foydalanishingiz mumkin:

$ taymer = yangi taymer ("test");
$ taymer -> start ();
uchun ($ i = 0; $ i< 500000; $i++){//запустим цыкл на пол милиона раз
if (is_int ($ i/ 100000))) (// agar joriy qiymat 100000 yoki 200000 yoki 300000 bo'lsa .... joriy natijani ko'rsatadi, lekin taymerni to'xtatmang!
echo $ timer -> olish (). "
";
}
}
$ taymer -> to'xtatish ();
print_r ($ timeTimer); // Taymerlarimizni chop eting

Bu sinfdan foydalanib, siz tizimni yuklamaydigan ko'plab taymerlarni yaratishingiz mumkin.
Mana shunday kichik taymer skript. Bu sinfni ham biroz soddalashtirish va o'zingiz uchun moslashtirish mumkin.

Agar saytda reklama aktsiyasi e'lon qilingan bo'lsa, unda uning boshlanishiga qancha vaqt qolganini ko'rsatadigan blok bo'lsa, sayt sezilarli darajada yutadi - hisoblagich hisoblagichi. Shuningdek, sanash taymeri aksiya tugashiga qancha vaqt qolganini ko'rsatishi mumkin, aksiya allaqachon amalda bo'lsa.

Keling, saytga tashrif buyuruvchilar ishtirokida saytda tanlovlar tashkil etilganda misolni ko'rib chiqaylik. Har bir tanlovning boshqaruv panelida tugash sanasi belgilanadi. Hisoblagich hisoblagich oxirigacha qancha kun, soat va daqiqa qolganligini ko'rsatishi kerak.

1. Birinchidan, so'zlarning sonlardan oldin to'g'ri tushishi haqida g'amxo'rlik qilaylik. Masalan, agar qolgan vaqt 45 kun va hokazo bo'lsa, saytdagi hisoblagichda "kunlar" yoki "kunlar" emas, aynan "kunlar" ko'rsatilishi kerak. Va agar 21 kun va boshqalar qolgan bo'lsa, unda siz aniq "kun" ni yozishingiz kerak. Soatlar va daqiqalarda ham xuddi shunday. Buning uchun customForm maxsus funktsiyasi javobgardir. Uning kodi quyida ko'rsatilgan.

PHP kodi

$ mod = $ raqami% 100;

$ suffix_key = ($ mod> 7 && $ mod

$ suffiksini qaytaring [$ suffix_key];

2. Keyin, biz musobaqaning tugash sanasini ko'rsatishimiz kerak joriy sahifa... Buning uchun biz ma'lumotlar bazasiga so'rov yozamiz, bu erda end_ - raqam va vaqt formatidagi sana. Biz uning qiymatini $ real_end o'zgaruvchisiga belgilaymiz. Keyin PHP sana funksiyasi yordamida joriy sana va vaqtni olamiz.

PHP kodi

3. Va, aslida, hisoblagich hisoblagichining o'zi. Biz uni ikki marta ishlatamiz PHP funktsiyasi strtotime, bu sananing matnli ko'rinishini o'zgartiradi ingliz tili tanlovning joriy va tugash sanasi uchun Unix vaqt tamg'asiga. Biz tugash sanasi va joriy sana o'rtasidagi farqni soniyalarda olamiz. Keyingi, eng past butun sonni qaytaradigan PHP pol funktsiyasidan foydalanib, qolgan kunlar, soatlar va daqiqalarni hisoblang. Hisob -kitoblar bir daqiqada 60 soniya, 1 soatda 3600 soniya, 1 kunda 86400 soniya borligiga asoslanadi.

PHP kodi

$ now_date = strtotime ($ dat);

4. Endi so'zlarni raqamlardan oldin burish uchun customForm customForm -ni qo'llang.

PHP kodi

printf ("

5. Va nihoyat, hisoblagichni amalga oshiruvchi blokning to'liq kodi. Tanlovlarda bo'lgani kabi, u ham xuddi shu tarzda, katalog saytida ma'lum tovarlarni reklama qilish yoki boshqa "soat" soatiga qadar qolgan vaqtni hisoblash mumkin.

PHP kodi

// sonlar oldidan so'zlarni ajratish funktsiyasi

to'g'riForm funktsiyasi ($ soni, $ qo'shimchasi) (

$ kalitlari = qator (2, 0, 1, 1, 1, 2);

$ mod = $ raqami% 100;

$ suffix_key = ($ mod> 7 && $ mod

$ suffiksini qaytaring [$ suffix_key];

$ resultT = mysql_query ("tanlovlardan end_ FROM musobaqalarini tanlang WHERE cid =" $ cid "") yoki o'lib ketish (mysql_error ());

$ myrowT = mysql_fetch_array ($ natijaT);

$ real_end = $ myrowT;

$ dat = sana ("Y-m-d, H: i: s");

// qolgan kunlar, soatlar va daqiqalarni hisoblang

$ now_date = strtotime ($ dat);

$ future_date = strtotime ($ real_end);

$ farq_ kunlari = $ kelajak_tarixi - $ hozir_duni;

$ kun = qavat ($ fark_kuni / 86400);

$ farq_soat = $ farq_ kunlar% 86400;

$ soat = qavat ($ fark_soat / 3600);

$ farq_min = $ farq_soat% 3600;

$ min = qavat ($ farq_min / 60);

$ array1 = qator ("kun", "kunlar", "kunlar");

$ word1 = to'g'riForm ($ kun, $ qator1);

$ array2 = qator ("soat", "soat", "soat");

$ word2 = to'g'riForm ($ soat, $ qator 2);

$ array3 = qator ("daqiqa", "daqiqa", "daqiqa");

$ word3 = to'g'riForm ($ min, $ array3);

printf ("

", $ kunlar, $ so'z1, $ soat, $ so'z2, $ min, $ so'z3);

So'nggi 45 daqiqani echim izlab o'tkazganimdan so'ng, men hisoblagichni hisoblashning oson echimini topa olmayapman. PHP yordamida va jQuery. Men topgan skriptlarning aksariyati faqat jQuery -ga asoslangan bo'lib, u bir tonna kod va kerak bo'lgandan ko'ra ko'proq parametrlarni talab qiladi, bundan tashqari, javob berish juda qiyin.

U nihoyatda ishlatish oson.

Siz faqat qilishingiz kerak

$ ("# taymer"). sanash ((gacha:)"// buni o'zgartiring, aniq));

OK, men identifikator o'zgarmasligini bilaman, lekin u buni ID sifatida ishlatmaydi. Bu odamlarni g'azablantiradi.

Aks holda, qiymatni qayta yuklamang, PHP -da JS qiymatini o'rnating va keyin hisoblang.

// buni joyiga qo'ying kodning tepasida echo "var t =". vaqt (). ";"; echo "var ft =". / * bu erda oxirgi vaqtingiz * /. ";";

// bu yordamchi funksiya. lpad funktsiyasi (kirish, len, padstr) (agar (! padstr) padstr = ""; // bu pad.var ret = String (kirish) uchun odatiy standart; var dlen = ret.length - len; if (dlen > 0) ret qaytish; for (var i = 0; i< dlen; i++) ret = padstr + ret; return ret; } $(document).ready(function name() { $("#timer").load(function() { // I changed the id $timer = $("timer"); // might as well cache it. // interval, not timeout. interval repeats var intval = setInterval(function(){ t += 500; // decrease the difference in time if(t >= ft) (t = ft; // manfiy vaqtni oldini oladi. clearInterval (intval) // bajarilganda tozalash) var dt = new Date (ft - t); $ timer.innerHTML = dt.getHours () + ":" + // pad har doim 2 raqamli lpad ekanligiga ishonch hosil qilish uchun (dt.getMinutes (), 2, "0") + ":" + lpad (dt.getSeconds) (), yigirma "); ), 500) // .5 soniyali qadamlari aniqroq))));

PHP foydalanuvchiga ma'lum vaqtni yuklagandan so'ng, nima uchun bu sizning ehtiyojlaringiz uchun etarli emasligini tushuntirib bera olasiz:

$ (funktsiya () ($ timerdiv = $ ("# bu"); taymer ();)); taymer funktsiyasi () ($ timerdiv.html ((int) $ timerdiv.html () - 1); setTimeout (taymer, 1000);)

Siz ichingizda juda yaqinsiz manba kodi... Mana, sizning kodingizning quyida keltirilgan ta'rifi kabi ishlaydi, yoki hech bo'lmaganda shunday deb o'ylayman - men bilaman, lekin u sizning talablaringizga mos keladimi -yo'qmi, ular biroz tushunarsiz edi. Shubhasiz, agar siz sahifani qayta yuklasangiz, hisoblagichni asl holatiga qaytarmaslik uchun PHP chiqishi boshqacha bo'lishi kerak. Shuni ta'kidlashni istardimki, nima uchun .load funktsiyasidan foydalanayotganingizga to'liq ishonchim komil emas. Bu funksiya AJAX qo'ng'irog'i uchun boshqa sahifaning mazmunini olish va tanlangan divga qo'shish uchun oddiygina o'rashdir. AJAX so'roviga qarshi DOMda mavjud bo'lgan kontent yordamida tanlangan div tarkibini o'zgartirish uchun .html () funktsiyasini qidirayotganingizga ishonaman.

Var taymer; $ (hujjat). allaqachon (ism ();); funktsiya nomi () (// taymerni tozalash clearTimeout (taymer); // taymer taymerini asl holatiga qaytarish = setTimeout ("name ()", 1000); // joriy vaqt qiymatini div var time = $ ("# bu "). html (); // ajratilgan vaqtlar var time_splits = time.split (": "); // jami soniyalarni qo'shish var total_time = (parseInt (time_splits) * 60 * 60) + (parseInt (time_splits) * 60) + parseInt (time_splits); // total_time - = 1 vaqtidan 1 soniyani olib tashlang; // jami vaqtni soat, daqiqa va soniyalarga qaytarish var hours = parseInt (total_time / 3600); total_time% = 3600; var daqiqa = parseInt (total_time / 60); var seconds = total_time% 60; // yangi vaqt o'zgaruvchisini o'rnatish var new_time = (soat< 10 ? "0" : "") + hours + (minutes < 10 ? ":0" : ":") + minutes + (seconds < 10 ? ":0" : ":") + seconds; //set html to new time $("#this").html(new_time); }

$ dateFormat = “d FY - g: ia”; $ targetDate = $ futureDate; // 25 sonini sanashni xohlagan soniyasiga o'zgartiring, sana strtotime $ actualDate = $ date1; $ secondsDiff = $ targetDate - $ actualDate; $ kalanDay = qavat ($ secondsDiff/60/60/24); $ qolgan soat = qavat (($ secondsDiff - ($ qolganDay * 60 * 60 * 24)) / 60/60); $ qolganMinut = qavat (($ secondsDiff - ($ qolganDay * 60 * 60 * 24) - ($ qolganHour * 60 * 60)) / 60); $ qolganSekundlar = qavat (($ secondsDiff - ($ qolganDay * 60 * 60 * 24) - ($ qolganHour * 60 * 60)) - ($ qolganMinutlar * 60)); $ actualDateDisplay = sana ($ dateFormat, $ actualDate); $ targetDateDisplay = sana ($ dateFormat, $ targetDate); 0)){ ?>

$ dateFormat = "d FY - g: ia" da; $ targetDate = $ futureDate; // 25 sonini sanashni xohlagan soniyasiga o'zgartiring, sana strtotime $ actualDate = $ date1; $ secondsDiff = $ targetDate - $ actualDate; $ kalanDay = qavat ($ secondsDiff/60/60/24); $ qolgan soat = qavat (($ secondsDiff - ($ qolganDay * 60 * 60 * 24)) / 60/60); $ qolganMinut = qavat (($ secondsDiff - ($ qolganDay * 60 * 60 * 24) - ($ qolganHour * 60 * 60)) / 60); $ qolganSekundlar = qavat (($ secondsDiff - ($ qolganDay * 60 * 60 * 24) - ($ qolganHour * 60 * 60)) - ($ qolganMinutlar * 60)); $ actualDateDisplay = sana ($ dateFormat, $ actualDate); $ targetDateDisplay = sana ($ dateFormat, $ targetDate); 0)){ ?>

Qabul qilmoq Qo'shimcha ma'lumot urfuziyaga tashrif buyuring

@epascarello savolga javob beradi, siz $ ("# taymer) kabi identifikatorli tanlagichda pastadir qiymatini o'tkazishingiz kerak. ")

va uni ham chaqiring