Php зворотний відлік часу з секундами. Таймер зворотного відліку, побудований на PHP і jQuery? Підготуйте ваші годинник для відображення
Буває, що вам для чогось потрібен таймер зворотного відліку, В інтернеті є багато рішень, однак вони або дуже громіздкі, або мають залежності від інших бібліотек. Сьогодні ми розглянемо, як зробити таймер зворотного відліку на javascript в 18 рядків коду.
план
- Розрахуйте час, що залишився
Встановіть правильну дату закінчення
По-перше, вам потрібно встановити правильну дату закінчення. Це буде рядок в будь-якому з форматів, які розуміє Date.parse () метод. Наприклад:
Var deadline \u003d "2015-12-31";
короткий формат
Var deadline \u003d "31/12/2015";
Або довгий формат
Var deadline \u003d "December 31 2015»;
Кожен з цих форматів дозволяє вам встановити точний час (в годинах, хвилинах, секундах) і тимчасову зону. наприклад:
Var deadline \u003d "December 31 2015 23:59:59 GMT + 02: 00";
Розрахуйте час, що залишився
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 (
"Total": t,
"Days": days,
"Hours": hours,
"Minutes": minutes,
"Seconds": seconds
};
}
Для початку ми створюємо змінну t, Щоб зберігати час, що залишився. Date.parse () метод вбудований в javascript і дозволяє конвертувати рядок з часом в значення в мілісекундах. Це дозволить нам віднімати у свій час від іншого і отримувати різницю між ними.
Var t \u003d Date.parse (endtime) - Date.parse (new Date ());
Наведіть дату до зручного формату
Тепер ми хочемо перевести мілісекунди в дні, години, хвилини і секунди. Давайте використовувати секунди як приклад:
Var seconds \u003d Math.floor ((t / 1000)% 60);
Розберемося, що тут відбувається.
- Ділимо мілісекунди на 1000, щоб перевести їх в секунди
- Ділимо загальне число секунд на 60 і зберігаємо залишок - вам не потрібні всі секунди, тільки ті, що залишилися після того, як хвилини були підраховані
- Округлите вниз до найближчого цілого значення, тому що вам потрібні повні секунди, а не їх фракції
Повторіть цю логіку, щоб конвертувати мілісекунди в хвилини, години і дні.
Виведіть дані таймера, як багаторазовий об'єкт
Коли годинник, хвилини і секунди готові, нам потрібно повернути їх як багаторазовий об'єкт.
Return (
"Total": t,
"Days": days,
"Hours": hours,
"Minutes": minutes,
"Seconds": seconds
};
Цей об'єкт дозволяє вам викликати вашу функцію і отримувати будь-яке з обчислених значень. Ось приклад, як ви можете отримати решту хвилини:
GetTimeRemaining (deadline) .minutes
Зручно, правда?
Відкрийте годинник на сторінці і зупиніть їх, коли вони досягнуть нуля
Зараз у нас є функція, яка повертає нам залишилися дні, години, хвилини і секунди. Ми можемо будувати наш таймер. По-перше, створіть наступну html структуру для годин:
Потім напишіть функцію, яка буде відображати дані всередині нашого div "а:
Function initializeClock (id, endtime) (
var clock \u003d document.getElementById (id);
var timeinterval \u003d setInterval (function () (
" +
"Hours:" + t.hours + "
" +
"Minutes:" + t.minutes + "
" +
"Seconds:" + t.seconds;
}
},1000);
}
Ця функція приймає два параметри: id елемента, який буде містити наш годинник, і кінцевий час лічильника. Усередині функції ми оголосимо змінну clock і будемо використовувати її, щоб зберігати посилання на наш блок з годинником, так що нам не потрібно запитувати DOM.
- Вираховувати час, що залишився
- Виводити залишився в наш div
- Якщо час, що залишився \u003d 0, зупиняти годинник
Єдине, що залишилося, запустити годинник наступним чином:
InitializeClock ( "clockdiv", deadline);
Вітаю! Тепер у вас є простий таймер зворотного відліку всього в 18 рядків javascript коду.
Підготуйте ваші годинник для відображення
До стилізації нам буде потрібно трохи вдосконалити деякі речі.
- Прибрати початкову затримку, щоб таймер показувався негайно
- Зробити скрипт годин ефективнішим, щоб не доводилося безперервно перебудовувати все годинник
- Додати нулі за бажанням
Прибираємо початкову затримку
У годиннику ми використовуємо setInterval, Щоб оновлювати відображення кожну секунду. Найчастіше це нормально, крім початку, де присутня 1с затримка. Щоб це виправити, нам потрібно оновлювати годинник один раз до того, як setInterval запускається.
Щоб це зробити, давайте перемістимо анонімну функцію, яку ми передаємо в setInterval(Ту, яка оновлює годинник кожну секунду) в власну окрему функцію, яку назвемо updateClock. Викличте цю функцію рази вище setInterval і потім викличте її знову всередині setInterval. Таким чином, годинник будуть показуватися без затримки.
У вашому javascript замініть це:
Var timeinterval \u003d setInterval (function () (...) 1000);
Function updateClock () (
var t \u003d getTimeRemaining (endtime);
clock.innerHTML \u003d "days:" + t.days + "
" +
"Hours:" + t.hours + "
" +
"Minutes:" + t.minutes + "
" +
"Seconds:" + t.seconds;
if (t.total clearInterval (timeinterval);
}
}
UpdateClock (); // запустіть функцію один раз, щоб уникнути затримки
var timeinterval \u003d setInterval (updateClock 1000);
Робимо скрипт більш ефективним
Щоб зробити скрипт більш ефективним, нам потрібно оновлювати не всі годинники, а тільки цифри. Для цього помістимо кожне число в тег span і будемо оновлювати тільки цей контент.
ось html:
Days:
Hours:
Minutes:
Seconds:
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 t.hours;
minutesSpan.innerHTML \u003d t.minutes;
secondsSpan.innerHTML \u003d t.seconds;
...
}
Додаємо провідні нулі
Якщо вам потрібні ведующіе нулі, ви можете замінити код такого виду:
SecondsSpan.innerHTML \u003d t.seconds;
На такий:
SecondsSpan.innerHTML \u003d ( "0" + t.seconds) .slice (-2);
висновок
Ми роздивились, як зробити простий таймер зворотного відліку на javascript. Все, що вам залишилося, це додати стилі. Дякую за увагу!
Доброго часу доби всім.
Давайте спробуємо сдалал таймер на PHP
Напевно багато хто задавався питаннями:
1. Скільки часу забирає мій скрипт.
2. Скільки генерується сторінка (можна помітити на багатьох сайтах).І так, поїхали.
Давайте наш таймер створимо на ООП, тобто в иде класу, і дамо назву класу Timer:
Class Timer ()
І давайте відразу створимо конструктор класу, щоб ми змогли як то називати дані таймера (це в більшості потрібно для оброботчіков) і також потрібно створити змінну, де ми змогли зберігається результати таймерів.
Ось код, який вийде:$ TimeTimer \u003d array ();
Class Timer (
private $ id;
$ This -\u003e id \u003d $ id;
}
}І давайте створимо одночасно функції для запуску таймера, остоновкі і витягування поточного значення:
ClassTimer (
private $ id;/ * Функція запуску таймера * /
function start () (
global $ timeTimer; // щоб можна було ссилатся на глобальну змінну
$ Mtime \u003d microtime (); // дізнаємося поточні час в секундах і мілісекундах
$ Mtime \u003d $ mtime + $ mtime;
$ TimeTimer [$ this -\u003e id] [ "start"] \u003d $ mtime; // занесемо результат в глобальну змінну
}Function stop () (
global $ timeTimer;
$ Mtime \u003d microtime ();
$ Mtime \u003d explode ( "", $ mtime);
$ Mtime \u003d $ mtime + $ mtime;
$ TimeTimer [$ this -\u003e id] [ "stop"] \u003d $ mtime;
$ TimeTimer [$ this -\u003e id] [ "result"] \u003d $ mtime - $ timeTimer [$ this -\u003e id] [ "start"];
}Function get ($ rand \u003d 5) (
global $ timeTimer;
if ($ timeTimer [$ this -\u003e id] [ "result"]) return $ timeTimer [$ this -\u003e id] [ "result"];
$ Mtime \u003d microtime ();
$ Mtime \u003d explode ( "", $ mtime);
$ Mtime \u003d $ mtime + $ mtime;
return round ($ mtime - $ timeTimer [$ this -\u003e id] [ "start"], $ rand);Function __construct ($ id \u003d "") (
if (! $ id) (trigger_error ( "Wrong parametr input", E_USER_WARNING);)
if ($ timeTimer [$ id]) (trigger_error ( "Can not init timer", E_USER_WARNING);)
$ This -\u003e id \u003d $ id;
}
}Ну я думаю, що в самому класі як би проблем немає ніяких. Залишається тільки форматувати наш таймер:
$ Timer \u003d new Timer ( "test"); // створюємо таймер з ім'ям "test"
$ Timer -\u003e start (); // запускаємо таймер
$ Timer -\u003e stop (); // зупиняємо таймерВ результаті даного коду, ми отримаємо дуже маленьке значення !!!
Давайте спробуємо якось завантажити систему. Можна скористатися циклом:$ Timer \u003d new Timer ( "test");
$ Timer -\u003e start ();
for ($ i \u003d 0; $ i< 500000; $i++){//запустим цыкл на пол милиона раз
if (is_int ($ i / 100000)) (// якщо поточні значення 100000 або 200000 або 300000 .... виведемо текушего результат, але таймер не зупиняємо!
echo $ timer -\u003e get (). "
";
}
}
$ Timer -\u003e stop ();
print_r ($ timeTimer); // виведені наші таймераВикористовуючи даний клас можна створювати безліч таймерів, які не будуть навантажувати систему.
Ось такий собі не великий скрипт таймерів. Даний клас можна також ще і спростить трохи, і налаштувати під себе.
Якщо на сайті анонсується будь-яка акція, то сайт значно виграє, якщо на ньому є блок, який показує, скільки часу залишилося до її початку - лічильник зворотного відліку. Також лічильник зворотного відліку може показувати, скільки часу залишилося до закінчення акції, якщо акція вже діє.
Розберемо приклад, коли на сайті організовуються конкурси за участю відвідувачів сайту. У кожного конкурсу в адмінці встановлюється дата закінчення. Лічильник зворотного відліку повинен показувати, скільки днів, годин і хвилин залишилося до закінчення.
1. Спочатку подбаємо про правильне відмінювання слів перед числами. Наприклад, якщо час, що залишився - 45 днів і т.д., то лічильник на сайті і повинен видавати саме "днів", а не "дня" або "день". А якщо залишився 21 день і т.д., то потрібно писати саме "день". Те ж саме з годинником і хвилинами. За це відповідає призначена для користувача функція correctForm. Її код приведений нижче.
код PHP
$ Mod \u003d $ number% 100;
$ Suffix_key \u003d ($ mod\u003e 7 && $ mod
return $ suffix [$ suffix_key];
2. Далі нам потрібно отримати дату закінчення конкурсу, відображуваного на поточній сторінці. Для цього пишемо запит до бази даних, де end_ - дата в форматі числа і часу. Надаємо її значення змінної $ real_end. Потім отримуємо поточну дату і час функцією PHP date.
код PHP
3. І, власне, сам лічильник зворотного відліку. Два рази використовуємо функцію PHP strtotime, яка перетворює текстове представлення дати англійською мовою в мітку часу Unix для поточної дати і дати закінчення конкурсу. Отримуємо різницю в секундах між датою закінчення і поточною датою. Далі, використовуючи функцію PHP floor, що повертає найближче менше ціле, обчислюємо дні, що залишилися, годинник і хвилини. Обчислення засновані на тому, що в хвилині 60 секунд, в 1 годині 3600 секунд, в 1 дні 86400 секунд.
код PHP
$ Now_date \u003d strtotime ($ dat);
4. Тепер застосовуємо для користувача функцію correctForm відмінювання слів перед числами.
код PHP
printf ( "
% S% s% s% s% s% s
до закриття конкурсу5. І, нарешті, повний код блоку, що реалізує лічильник зворотного відліку. Як у випадку з конкурсами, він точно так само може виробляє зворотний відлік для акцій на ті чи інші товари на сайті-каталозі або будь-який інший відлік часу, що залишився до будь-якого "години Ч".
код PHP
// функція відмінювання слів перед числами
function correctForm ($ number, $ suffix) (
$ Keys \u003d array (2, 0, 1, 1, 1, 2);
$ Mod \u003d $ number% 100;
$ Suffix_key \u003d ($ mod\u003e 7 && $ mod
return $ suffix [$ suffix_key];
$ ResultT \u003d mysql_query ( "select end_ FROM competitions WHERE cid \u003d" $ cid "") or die (mysql_error ());
$ MyrowT \u003d mysql_fetch_array ($ resultT);
$ Real_end \u003d $ myrowT;
$ Dat \u003d date ( "Y-m-d, H: i: s");
// обчислення днів, що залишилися, годин і хвилин
$ Now_date \u003d strtotime ($ dat);
$ Future_date \u003d strtotime ($ real_end);
$ Difference_days \u003d $ future_date - $ now_date;
$ Days \u003d floor ($ difference_days / 86400);
$ Difference_hours \u003d $ difference_days% 86400;
$ Hours \u003d floor ($ difference_hours / 3600);
$ Difference_min \u003d $ difference_hours% 3600;
$ Min \u003d floor ($ difference_min / 60);
$ Array1 \u003d array ( "день", "дня", "днів");
$ Word1 \u003d correctForm ($ days, $ array1);
$ Array2 \u003d array ( "час", "години", "годин");
$ Word2 \u003d correctForm ($ hours, $ array2);
$ Array3 \u003d array ( "хвилина", "хвилини", "хвилин");
$ Word3 \u003d correctForm ($ min, $ array3);
printf ( "
% S% s% s% s% s% s
до закриття конкурсуВитративши останні 45 хвилин на пошук рішення, я не можу знайти легке рішення для створення таймера зворотного відліку з використанням PHP і jQuery. Більшість вже побудованих скриптів, які я знайшов, засновані виключно на jQuery, які вимагають тонни коду, і більше параметрів, ніж вони повинні, плюс, адаптивність досить складно.
він надзвичайно простий у використанні.
Все, що вам потрібно зробити, це
$ ( "# Timer"). Countdown ((until: ""// change this, obviously));
Добре, я знаю, що ідентифікатор не є змінною, але не використовує this як ідентифікатор. Це змушує людей с'ежіваться.
В решту не перезавантажувати значення, задайте значення в JS в PHP і потім відрахуйте.
// place this in the
above the code below echo "var t \u003d". time (). ";"; echo "var ft \u003d". / * Your final time here * /. ";";// this is a helper function. function lpad (input, len, padstr) (if (! padstr) padstr \u003d ""; // this is the normal default for pad. var ret \u003d String (input); var dlen \u003d ret.length - len; if (dlen \u003e 0) return ret; for (var i \u003d 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 >\u003d Ft) (t \u003d ft; // prevent negative time. ClearInterval (intval) // cleanup when done.) Var dt \u003d new Date (ft - t); $ Timer.innerHTML \u003d dt.getHours () + ":" + // pad to make sure it is always 2 digits lpad (dt.getMinutes (), 2, "0") + ":" + lpad (dt.getSeconds (), 2, "0"); ), 500) // increments of .5 seconds are more accurate))));
Як тільки php завантажив певний час для користувача, ви можете пояснити, чому цього недостатньо для ваших потреб:
$ (Function () ($ timerdiv \u003d $ ( "# this"); timer ();)); function timer () ($ timerdiv.html ((int) $ timerdiv.html () - 1); setTimeout (timer 1000);)
Ви дуже близькі у своєму вихідному коді. Ось модифікація вашого коду нижче, який працює, як описано, або, по крайней мере, так я думаю - я знаю, що це працює, але я не впевнений, чи відповідає він вашим вимогам, вони були трохи неясні. Очевидно, що якщо ви перезавантажте сторінку, вам доведеться покладатися на вихід PHP, щоб відрізнятися для того, щоб лічильник не скинув. Просто хочу відзначити, що я не зовсім впевнений, чому ви використовуєте функцію.load. Ця функція дійсно просто оболонка для виклику AJAX, щоб захопити вміст іншої сторінки і вставити її в обраний div. Я вірю, що ви шукаєте функцію.html (), щоб змінити вміст обраного div, використовуючи вміст, доступне в DOM, проти запиту AJAX.
Var timer; $ (Document) .ready (name ();); function name () (// clear the timer clearTimeout (timer); // reset the timer timer \u003d setTimeout ( "name ()", 1000); // grab the current time value in the div var time \u003d $ ( "# this "). html (); // split times var time_splits \u003d time.split (": "); // add up total seconds var total_time \u003d (parseInt (time_splits) * 60 * 60) + (parseInt (time_splits) * 60) + parseInt (time_splits); // subtract 1 second from time total_time - \u003d 1; // turn total time back in hours, minutes, and seconds var hours \u003d parseInt (total_time / 3600); total_time% \u003d 3600; var minutes \u003d parseInt (total_time / 60); var seconds \u003d total_time% 60; // set new time variable var new_time \u003d (hours< 10 ? "0" : "") + hours + (minutes < 10 ? ":0" : ":") + minutes + (seconds < 10 ? ":0" : ":") + seconds; //set html to new time $("#this").html(new_time); }
$ DateFormat \u003d "d FY - g: ia"; $ TargetDate \u003d $ futureDate; // Change the 25 to however many minutes you want to countdown change date in strtotime $ actualDate \u003d $ date1; $ SecondsDiff \u003d $ targetDate - $ actualDate; $ RemainingDay \u003d floor ($ secondsDiff / 60/60/24); $ RemainingHour \u003d floor (($ secondsDiff - ($ remainingDay * 60 * 60 * 24)) / 60/60); $ RemainingMinutes \u003d floor (($ secondsDiff - ($ remainingDay * 60 * 60 * 24) - ($ remainingHour * 60 * 60)) / 60); $ RemainingSeconds \u003d floor (($ secondsDiff - ($ remainingDay * 60 * 60 * 24) - ($ remainingHour * 60 * 60)) - ($ remainingMinutes * 60)); $ ActualDateDisplay \u003d date ($ dateFormat, $ actualDate); $ TargetDateDisplay \u003d date ($ dateFormat, $ targetDate); 0)){ ?>
в $ dateFormat \u003d "d FY - g: ia"; $ TargetDate \u003d $ futureDate; // Change the 25 to however many minutes you want to countdown change date in strtotime $ actualDate \u003d $ date1; $ SecondsDiff \u003d $ targetDate - $ actualDate; $ RemainingDay \u003d floor ($ secondsDiff / 60/60/24); $ RemainingHour \u003d floor (($ secondsDiff - ($ remainingDay * 60 * 60 * 24)) / 60/60); $ RemainingMinutes \u003d floor (($ secondsDiff - ($ remainingDay * 60 * 60 * 24) - ($ remainingHour * 60 * 60)) / 60); $ RemainingSeconds \u003d floor (($ secondsDiff - ($ remainingDay * 60 * 60 * 24) - ($ remainingHour * 60 * 60)) - ($ remainingMinutes * 60)); $ ActualDateDisplay \u003d date ($ dateFormat, $ actualDate); $ TargetDateDisplay \u003d date ($ dateFormat, $ targetDate); 0)){ ?>Для отримання додаткової інформації відвідайте urfusion
@epascarello дайте відповідь на питання, вам потрібно передати значення циклу в селекторі з ідентифікатором, наприклад $ ( "# timer php echo $loopval; ?> ")
а також викликати його в