Потратив последние 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 ")
а также вызвать его в
