Бывает, что вам для чего-то нужен таймер обратного отсчета , в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на javascript в 18 строк кода .
План- Высчитайте оставшееся время
Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:
Var deadline = "2015-12-31";
Короткий формат
Var deadline = "31/12/2015";
Или длинный формат
Var deadline = "December 31 2015";
Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:
Var deadline = "December 31 2015 23:59:59 GMT+02:00";
Высчитайте оставшееся времяFunction getTimeRemaining(endtime){
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));
return {
"total": t,
"days": days,
"hours": hours,
"minutes": minutes,
"seconds": seconds
};
}
Для начала мы создаем переменную t , чтобы хранить оставшееся время. Date.parse() метод встроен в javascript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.
Var t = Date.parse(endtime) - Date.parse(new Date());
Приведите дату к удобному форматуТеперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:
Var seconds = 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 = document.getElementById(id);
var timeinterval = setInterval(function(){
" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;
}
},1000);
}
Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM .
- Высчитывать оставшееся время
- Выводить оставшееся время в наш div
- Если оставшееся время = 0, останавливать часы
Единственное, что осталось, запустить часы следующим образом:
InitializeClock("clockdiv", deadline);
Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк javascript кода .
Подготовьте ваши часы для отображенияДо стилизации нам будет нужно немного усовершенствовать некоторые вещи.
- Убрать начальную задержку, чтобы таймер показывался незамедлительно
- Сделать скрипт часов более эффективным, чтобы не приходилось непрерывно перестраивать все часы
- Добавить нули по желанию
В часах мы используем setInterval , чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.
Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval (ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock . Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval . Таким образом, часы будут показываться без задержки.
В вашем javascript замените это:
Var timeinterval = setInterval(function(){ ... },1000);
Function updateClock(){
var t = getTimeRemaining(endtime);
clock.innerHTML = "days: " + t.days + "
" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;
if(t.total
clearInterval(timeinterval);
}
}
UpdateClock(); // запустите функцию один раз, чтобы избежать задержки
var timeinterval = setInterval(updateClock,1000);
Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.
Вот html :
Days:
Hours:
Minutes:
Seconds:
Var daysSpan = clock.querySelector(".days");
var hoursSpan = clock.querySelector(".hours");
var minutesSpan = clock.querySelector(".minutes");
var secondsSpan = clock.querySelector(".seconds");
Function updateClock(){
var t = getTimeRemaining(endtime);
DaysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;
...
}
Если вам нужны ведующие нули, вы можете заменить код такого вида:
SecondsSpan.innerHTML = t.seconds;
На такой:
SecondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
ЗаключениеМы рассмотрели, как сделать простой таймер обратного отсчета на javascript . Все, что вам осталось, это добавить стили. Спасибо за внимание!
Если на сайте анонсируется какая-либо акция, то сайт значительно выигрывает, если на нём есть блок, показывающий, сколько времени осталось до её начала - счётчик обратного отсчёта. Также счётчик обратного отсчёта может показывать, сколько времени осталось до окончания акции, если акция уже действует.
Разберём пример, когда на сайте организуются конкурсы с участием посетителей сайта. У каждого конкурса в админке устанавливается дата окончания. Счётчик обратного отсчёта должен показывать, сколько дней, часов и минут осталось до окончания.
1. Сначала позаботимся о правильном склонения слов перед числами. Например, если оставшееся время - 45 дней и т.д., то счётчик на сайте и должен выдавать именно "дней", а не "дня" или "день". А если остался 21 день и т.д., то нужно писать именно "день". То же самое с часами и минутами. За это отвечает пользовательская функция correctForm. Её код приведён ниже.
Код PHP
$mod = $number % 100;
$suffix_key = ($mod > 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 = strtotime ($dat);
4. Теперь применяем пользовательскую функцию correctForm склонения слов перед числами.
Код PHP
printf ("%s %s %s %s %s %sдо закрытия конкурса
5. И, наконец, полный код блока, реализующего счётчик обратного отсчёта. Как в случае с конкурсами, он точно так же может производит обратный отсчёт для акций на те или иные товары на сайте-каталоге или любой другой отсчёт времени, оставшегося до какого-либо "часа Ч".
Код PHP
//функция склонения слов перед числами
function correctForm($number, $suffix) {
$keys = array (2, 0, 1, 1, 1, 2);
$mod = $number % 100;
$suffix_key = ($mod > 7 && $mod
return $suffix[$suffix_key];
$resultT=mysql_query ("select end_ FROM competitions WHERE cid="$cid"") or die (mysql_error());
$myrowT=mysql_fetch_array ($resultT);
$real_end=$myrowT;
$dat=date ("Y-m-d, H:i:s");
//вычисление оставшихся дней, часов и минут
$now_date = strtotime ($dat);
$future_date = strtotime ($real_end);
$difference_days = $future_date - $now_date;
$days = floor ($difference_days/86400);
$difference_hours = $difference_days % 86400;
$hours = floor ($difference_hours/3600);
$difference_min = $difference_hours % 3600;
$min = floor ($difference_min/60);
$array1 = array ("день", "дня", "дней");
$word1 = correctForm($days, $array1);
$array2 = array ("час", "часа", "часов");
$word2 = correctForm($hours, $array2);
$array3 = array ("минута", "минуты", "минут");
$word3 = correctForm($min, $array3);
printf ("%s %s %s %s %s %sдо закрытия конкурса", $days,$word1,$hours,$word2,$min,$word3);
Доброго времени суток всем.Давайте попытаемся сдалать таймер на PHP
Наверное много кто задавался вопросами:
1. Сколько времени забирает мой скрипт.
2. Сколько генерируется страница (можна заметить на многих сайтах).
И так, поехали.
Давайте наш таймер создадим на ООП, тоесть в иде класса, и дадим название класса Timer:
Class Timer{}
И давайте сразу создадим конструктор класса, чтоб мы смогли как то называть данные таймера (это в большинстве нужно для оброботчиков) и также нужно создать переменную, где мы смогли хранится результаты таймеров.
Вот код, который получится:
$timeTimer = array();
Class Timer{
private $id;
$this -> id = $id;
}
}
И давайте создадим сразу функции для запуска таймера, остоновки и вытаскивание текущего значения:
ClassTimer{
private $id;
/* Функция запуска таймера */
function start(){
global $timeTimer;//чтоб можна было ссылатся на глобальну переменную
$mtime = microtime();//узнаем текущие время в секундах и милисекундах
$mtime = $mtime + $mtime;
$timeTimer[$this -> id]["start"] = $mtime;//занесем результат в глобальную переменную
}
Function stop(){
global $timeTimer;
$mtime = microtime();
$mtime = explode(" ", $mtime);
$mtime = $mtime + $mtime;
$timeTimer[$this -> id]["stop"] = $mtime;
$timeTimer[$this -> id]["result"] = $mtime - $timeTimer[$this -> id]["start"];
}
Function get($rand = 5){
global $timeTimer;
if($timeTimer[$this -> id]["result"]) return $timeTimer[$this -> id]["result"];
$mtime = microtime();
$mtime = explode(" ", $mtime);
$mtime = $mtime + $mtime;
return round($mtime - $timeTimer[$this -> id]["start"], $rand);
Function __construct($id = ""){
if(!$id){ trigger_error ("Wrong parametr input ", E_USER_WARNING); }
if($timeTimer[$id]){ trigger_error ("Can not init timer", E_USER_WARNING); }
$this -> id = $id;
}
}
Ну я думаю, что в самом классе как бы проблем нет ни каких. Остается только инициализировать наш таймер:
$timer = new Timer("test");//создаем таймер с именим "test"
$timer -> start();//запускаем таймер
$timer -> stop();//останавливаем таймер
В результате данного кода, мы получим очень маленькое значение!!!
Давайте попытаемся как-то загрузить систему. Можна воспользоватся циклом:
$timer = new Timer("test");
$timer -> start();
for($i = 0; $i < 500000; $i++){//запустим цыкл на пол милиона раз
if(is_int($i / 100000)){//если текущие значение 100000 или 200000 или 300000 .... выведем текуший результат, но таймер не останавливаем!
echo $timer -> get() . "
";
}
}
$timer -> stop();
print_r($timeTimer);//Выведим наши таймера
Используя данный клас можна создавать множество таймеров, которые не будут нагружать систему.
Вот такой себе не большой скрипт таймеров. Даный класс можна также еще и спростить немного, и настроить под себя.
Потратив последние 45 минут на поиск решения, я не могу найти легкое решение для создания таймера обратного отсчета с использованием PHP и jQuery. Большинство уже построенных скриптов, которые я нашел, основаны исключительно на jQuery, которые требуют тонны кода, и больше параметров, чем они должны, плюс, адаптивность довольно сложно.
Он чрезвычайно прост в использовании.
Все, что вам нужно сделать, это
$("#timer").countdown({ until: "" // change this, obviously });
Хорошо, я знаю, что идентификатор не является переменной, но не использует this как идентификатор. Это заставляет людей съеживаться.
В остальном не перезагружайте значение, задайте значение в JS в PHP и затем отсчитайте.
// place this in the above the code below echo "var t = " . time() . ";"; echo "var ft = " . /* your final time here */ . ";";
// this is a helper function. function lpad(input, len, padstr) { if(!padstr) padstr = " "; // this is the normal default for pad. var ret = String(input); var dlen = ret.length - len; if(dlen > 0) return ret; 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; // prevent negative time. clearInterval(intval) // cleanup when done. } var dt = new Date(ft - t); $timer.innerHTML = 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 = $("#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 = setTimeout("name()", 1000); //grab the current time value in the div var time = $("#this").html(); //split times var time_splits = time.split(":"); //add up total seconds var total_time = (parseInt(time_splits)*60*60) + (parseInt(time_splits)*60) + parseInt(time_splits); //subtract 1 second from time total_time -= 1; //turn total time back in hours, minutes, and seconds var hours = parseInt(total_time / 3600); total_time %= 3600; var minutes = parseInt(total_time / 60); var seconds = total_time % 60; //set new time variable var new_time = (hours < 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;//Change the 25 to however many minutes you want to countdown change date in strtotime $actualDate = $date1; $secondsDiff = $targetDate – $actualDate; $remainingDay = floor($secondsDiff/60/60/24); $remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60); $remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60); $remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60)); $actualDateDisplay = date($dateFormat,$actualDate); $targetDateDisplay = date($dateFormat,$targetDate); var days = var hours = var minutes = var seconds = function setCountDown(statusfun) {//alert(seconds); var SD; if(days >= 0 && minutes > < 0){ minutes–; seconds = 59 } if (minutes < 0){ hours–; minutes = 59 } if (hours < 0){ days–; hours = 23 } document.getElementById(“remain”).style.display = “block”; document.getElementById(“remain”).innerHTML = ” Your Product Reverse For “+minutes+” minutes, “+seconds+” seconds”; SD=window.setTimeout(“setCountDown()”, 1000); }else{ document.getElementById(“remain”).innerHTML = “”; seconds = “00″; window.clearTimeout(SD); jQuery.ajax({ type: “GET”, url: “ setCountDown(); #remain{display:none;} в $dateFormat = “d FY — g:ia”; $targetDate = $futureDate;//Change the 25 to however many minutes you want to countdown change date in strtotime $actualDate = $date1; $secondsDiff = $targetDate – $actualDate; $remainingDay = floor($secondsDiff/60/60/24); $remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60); $remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60); $remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60)); $actualDateDisplay = date($dateFormat,$actualDate); $targetDateDisplay = date($dateFormat,$targetDate); var days = var hours = var minutes = var seconds = function setCountDown(statusfun) {//alert(seconds); var SD; if(days >= 0 && minutes >= 0){ var dataReturn = jQuery.ajax({ type: “GET”, url: “”, async: true, success: function(data){ var data = data.split(“/”); day = data; hours = data; minutes = data; seconds = data; } }); seconds–; if (seconds < 0){ minutes–; seconds = 59 } if (minutes < 0){ hours–; minutes = 59 } if (hours < 0){ days–; hours = 23 } document.getElementById(“remain”).style.display = “block”; document.getElementById(“remain”).innerHTML = ” Your Product Reverse For “+minutes+” minutes, “+seconds+” seconds”; SD=window.setTimeout(“setCountDown()”, 1000); }else{ document.getElementById(“remain”).innerHTML = “”; seconds = “00″; window.clearTimeout(SD); jQuery.ajax({ type: “GET”, url: “”, async: false, success: function(html){ } }); document.getElementById(“remain”).innerHTML = “”; window.location = document.URL; // Add your redirect url } } setCountDown(); #remain{display:none;}
Для получения дополнительной информации посетите urfusion
@epascarello ответьте на вопрос, вам нужно передать значение цикла в селекторе с идентификатором, например $ ("# timer ")
а также вызвать его в
Антивирус Bitdefender: эффективный защитник Без вопросов
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?