使用PHP時間字符串進入javascript後倒計時不起作用

我正在創建時間，以後我將使用它來製作倒數計時器。當只有JavaScript或jQuery是我的選擇時，它很容易創建。但是，當我得到PHP日期時間字符串並使用jQuery顯示它時，問題就出現了。在使用PHP日期和時間字符串後，它不會動態更新時間。下面是我的一個小代碼。使用PHP時間字符串進入javascript後倒計時不起作用

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 

    $(document).ready(function(){ 
     var value = $("#date_time").text(); 

     function countdown(){ 
       setTimeout(countdown, 1000); 
       var date = new Date(Date.parse(value)); 
       $("#php_date_time").text(date); 

      } 
     countdown(); 


    }); 



    </script> 
</head> 
<body > 
    <div id="date_time"><?php echo Date("d-m-Y H:i:s");?></div> 
    <div id="php_date_time"> </div> 

</body> 
</html>

的代碼，如果我不PHP日期時間字符串傳遞給javascript Date()函數作爲參數工作完全正常。如果開始工作，我可以自己倒計時。

var date = new Date(); // works fine without passing php date time string 
var date = new Date(Date.parse(value)); // this does not work fine. Time does not update

請幫助建議我需要做什麼。

謝謝。

來源

2013-12-12 Rebbeca

爲什麼不使用的setInterval而不是setCountdown？在你的函數定義之後，使用setInterval（countdown，1000）並在你的函數內部移除setTimeout（）！ –

似乎是爲我工作：http://codepad.viper-7.com/apEEgQ – APAD1

你在期待什麼？正如@ APAD1所示，這段代碼正確地從PHP獲取時間並反覆在屏幕上顯示它 – Shai

既然你想讓它從時間PHP給你，你需要改變你的JavaScript來利用這段時間開始設置初始值，然後每秒更改一次。現在，您只需更新相同的值。

http://codepad.viper-7.com/sPVlEI

$(document).ready(function(){ 
    var value = $("#date_time").text(); //get init value 
    var date = new Date(Date.parse(value)); //store initial time 

    setInterval(function countdown(){ 
     $("#php_date_time").text(date); //set time 
     date = new Date(date.getTime() + 1000); //create new time from old + 1 sec 
    },1000); // will call countdown() function every second 

});

來源

2013-12-12 17:02:41 Jeribo

這就是我一直在尋找。謝謝你@Jeribo – Rebbeca

問題是因爲服務器只編譯一次你的php日期，你的countdown函數總是使用相同的日期值。還有另一個問題，你必須考慮哪些是你的服務器時間不需要與客戶端時間匹配。你最好用客戶端的時間開始你的計時器。但如果你要根據你的服務器的時候開始吧，試試這個，你的問題就解決了：

$(document).ready(function(){ 
    var value = $("#date_time").text(); 

    function countdown(date){ 
     setTimeout(function(){ 
      countdown(new Date(date.valueOf()+1000)); 
     }, 1000); 

     $("#php_date_time").text(date); 
    } 

    countdown(new Date(Date.parse(value))); 
});

來源

2013-12-12 16:51:30

問題是，根據服務器時間在網站上管理所有內容。就倒計時器而言，我必須從給定的時間字符串開始。 – Rebbeca

我只想做的是使用JavaScript啓動計時器，但開始時間始終是PHP字符串。 – Rebbeca

我剛剛編輯我的答案我認爲這正是你想要的，這是你的jsfiddle [DEMO]（http://jsfiddle.net/mehranhatami/xJLbv/1/） –

使用PHP時間字符串進入javascript後倒計時不起作用

回答

相關問題