Потратив последние 45 минут на поиск решения, я не могу найти легкое решение для создания таймера обратного отсчета с использованием PHP и jQuery. Большинство уже построенных скриптов, которые я нашел, основаны исключительно на jQuery, которые требуют тонны кода, и больше параметров, чем они должны, плюс, адаптивность довольно сложно.
Вот моя ситуация;
PHP:
$countdown = date("h:i:s"); // This isn't my actual $countdown variable, just a placeholder
JQuery:
$(document).ready(function name() { $("#this").load( function() { setTimeout("name()", 1000) } } });
HTML:
<div id="this"><?php echo($countdown); ?></div>
Моя идея состоит в том, что каждую секунду #this это перезагружается, давая новое значение его содержимому, а поскольку обратный отсчет $ не является статической переменной, новое значение будет загружаться каждый раз. Это устраняет необходимость иметь дело с сеансами (поскольку основной таймер обратного отсчета JavaScript будет сброшен на pageload и т. Д.).
Я бы, хотя бы это сработало, пока я не понял, что событие .load() не перезагружает #this (я знаю глупо меня), поэтому я думаю, что мне интересно – есть ли связующее событие I может использовать эту работу или есть способ получить функциональность, которую я ищу, без использования плагина jQuery (который не соответствует точно, что я хочу в любом случае)?
Вы должны использовать таймер обратного отсчета Keith Wood: http://keith-wood.name/countdown.html
Он чрезвычайно прост в использовании.
Все, что вам нужно сделать, это
$('#timer').countdown({ until: '<?php echo date("h:i:s"); ?>' // change this, obviously });
Вот скрипка: http://jsfiddle.net/tqyj4/289/
Хорошо, я знаю, что идентификатор не является переменной, но не использует this как идентификатор. Это заставляет людей съеживаться.
В остальном не перезагружайте значение, задайте значение в JS в PHP и затем отсчитайте.
// place this in the <head> 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[0])*60*60) + (parseInt(time_splits[1])*60) + parseInt(time_splits[2]); //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); <script type=”text/javascript”> var days = <?php echo $remainingDay; ?> var hours = <?php echo $remainingHour; ?> var minutes = <?php echo $remainingMinutes; ?> var seconds = <?php echo $remainingSeconds; ?> function setCountDown(statusfun) {//alert(seconds); var SD; if(days >= 0 && minutes >= 0){ var dataReturn = jQuery.ajax({ type: “GET”, url: “<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB).'index.php/countdowncont/'; ?>”, async: true, success: function(data){ var data = data.split(“/”); day = data[0]; hours = data[1]; minutes = data[2]; seconds = data[3]; } }); 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: “<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB).'index.php/countdown/'; ?>”, async: false, success: function(html){ } }); document.getElementById(“remain”).innerHTML = “”; window.location = document.URL; // Add your redirect url } } </script> <?php if($date1 < $futureDate && ($qtyCart > 0)){ ?> <script type=”text/javascript”> setCountDown(); </script> <?php }else{ ?> <style> #remain{display:none;} </style> <?php }}?> <div id=”remain”></div>в$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); <script type=”text/javascript”> var days = <?php echo $remainingDay; ?> var hours = <?php echo $remainingHour; ?> var minutes = <?php echo $remainingMinutes; ?> var seconds = <?php echo $remainingSeconds; ?> function setCountDown(statusfun) {//alert(seconds); var SD; if(days >= 0 && minutes >= 0){ var dataReturn = jQuery.ajax({ type: “GET”, url: “<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB).'index.php/countdowncont/'; ?>”, async: true, success: function(data){ var data = data.split(“/”); day = data[0]; hours = data[1]; minutes = data[2]; seconds = data[3]; } }); 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: “<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB).'index.php/countdown/'; ?>”, async: false, success: function(html){ } }); document.getElementById(“remain”).innerHTML = “”; window.location = document.URL; // Add your redirect url } } </script> <?php if($date1 < $futureDate && ($qtyCart > 0)){ ?> <script type=”text/javascript”> setCountDown(); </script> <?php }else{ ?> <style> #remain{display:none;} </style> <?php }}?> <div id=”remain”></div>
Для получения дополнительной информации посетите urfusion
@epascarello ответьте на вопрос, вам нужно передать значение цикла в селекторе с идентификатором, например $ ("# timer <? php echo $loopval; ?> ")
а также вызвать его в
<div id="timer<?php echo $loopval; ?>"> </div>