建立在PHP和jQuery上的倒數計時器？

花了最後45分鐘尋找解決方案後，我似乎無法找到一個簡單的解決方案，使用PHP和jQuery創建倒數計時器。我發現的大多數已經構建的腳本完全基於jQuery，它需要大量的代碼和更多的參數，然後他們應該加上適應性非常困難。建立在PHP和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被重新加載，給人一種新的價值它是內容，並且$ countdown不是一個靜態變量，每次都會加載一個新值。這消除了處理會話的需要（因爲基本的javascript倒數計時器會在頁面加載時重置等）。

我會一直儘管這會工作，直到我意識到事件綁定不重裝#this（我傻認識我），所以我想我不知道是 - 是否有一個事件綁定我可以用來做這個工作，或者有沒有一種方法來獲得我正在尋找的功能，而無需使用jQuery插件（它不完全匹配我想要的）？

來源

2011-08-19 Avicinnian

該頁面呈現時，該行將運行一次。 :) – epascarello

你需要確認每一秒的PHP？或者只是使用PHP來設置pageload上的值，然後使用js/jquery來處理每秒一個簡單的遞減？ –

爲什麼PHP需要參與？這似乎有不少體面的，輕量級[jQuery倒計時項目]（http://code.google.com/p/jquery-countdown/）... –

您應該使用基思·伍德的倒計時：http://keith-wood.name/countdown.html

這是非常使用方便。

所有你需要做的就是

$('#timer').countdown({ 
    until: '<?php echo date("h:i:s"); ?>' // change this, obviously 
});

這裏的小提琴：http://jsfiddle.net/tqyj4/289/

來源

2011-08-19 00:16:36

謝謝，我確實碰到過它，但認爲它比一個簡單的3班輪更復雜。我試圖使用它的默認值，但沒有出現 - http://jsfiddle.net/tqyj4/3/？我是新手，所以請原諒我的無知:)！ – Avicinnian

@Pixelatron：在傳遞給倒計時插件的對象字面量內，您在日期之後有一個分號。我固定你的小提琴，它正在工作。看到我更新的答案。 –

非常感謝:)。 – Avicinnian

好的，我知道一個ID不是一個變量，但不使用this作爲ID。這讓人感到畏縮。

其餘的，不要重新加載值，在PHP中設置JS值，然後倒計時。

// 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 
     } 
    } 
});

來源

2011-08-19 00:14:35 cwallenpoole

一旦PHP加載一個特定的時間量的用戶，可以解釋爲什麼這是不夠的您的需求：

$(function(){ 
    $timerdiv = $("#this"); 

    timer(); 
}); 

function timer() 
{ 
$timerdiv.html((int)$timerdiv.html() - 1); 
setTimeout(timer, 1000); 
}

來源

2011-08-19 00:17:05

您的原始代碼非常接近。以下是對您的代碼的修改，其工作方式如上所述，或者至少如此 - 我認爲它是有效的，但我不確定它是否符合您的要求，但它們有點不清楚。顯然，如果你重新加載頁面，你將不得不依賴於PHP輸出的不同，以便計數器不會被重置。但要注意的是，我並不完全確定爲什麼要使用.load函數 - 該函數實際上只是一個AJAX調用的包裝器，用於獲取另一個頁面的內容並將其插入到選定的div中。我相信你正在尋找的是。html（）函數使用DOM中提供的內容與發出AJAX請求來更改所選div的內容。

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); 
}

來源

2011-08-19 00:53:29 streetlogics

$dateFormat = 「d F Y — g:i a」; 
$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

來源

2013-06-04 13:17:20 urfusion

@epascarello在您需要在選擇與ID通過循環值例如 $回答你的問題（「＃定時器<? php echo $loopval; ?>」）

並且還呼叫它在

<div id="timer<?php echo $loopval; ?>"> 
</div>

來源

2017-04-26 11:39:37 Haseebuddin09

建立在PHP和jQuery上的倒數計時器？

回答

相關問題