PHP/jQuery的時鐘+倒計時

Question

我只寫了另外一個問題，但它沒有得到很好所著，易懂可言，在這裏我會貼上我已經ATM所做的工作，和我的問題：

• 我想在我的網頁上顯示時鐘（它基於wordpress）顯示SERVER的實際時間（重要的是，因爲我有全世界的訪問者）。

- 我確實需要SERVER時間，因爲我需要從晚上19:00到03:00每天都進行倒計時。

這裏是我到現在爲止的代碼（我只是把它翻譯，因爲它是在西班牙，所以它應該是運行良好「）

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript"> 
    //Variables 
    var date1; 
    var seconds; 
    var minutes; 
    var hours; 
    var x; 

    var startHour = 19; 

    var finalHour = 3; 

    var diferencia1; 
    //Funcion principal 
    x = $(document); 
    x.ready(timer_test); 
    //funcion del timer_test 
    function timer_test() { 
     x= $("#timer"); 
     date1 = new Date(<?php echo time() * 1000 ?>); 
     seconds = date1.getSeconds(); 
     minutes = date1.getMinutes(); 
     hours = date1.getHours(); 


     if (hours > startHour | hours < finalHour) { 
     diferencehours = startHour - hours -1; 
     diferenceminutes = 60 - minutes -1; 
     diferenceseconds = 60 - seconds; 

     x.html("All of our services are running."); 

    } 

     else if(hours < startHour && hours >= finalHour) { 
     diferencehours = startHour - hours -1; 
     diferenceminutes = 60 - minutes -1; 
     diferenceseconds = 60 - seconds; 

     x.html(diferencehours + ":" + diferenceminutes + ":" + diferenceseconds); 

     } 

    } 

    //Interval 
    setInterval(timer_test,1000); 




    </script> 


    <div id="timer"></div> 

一個我發現的問題，是，時鐘只是stucked，時間根本不會改變。

解決方案？我怎麼可能提高呢？

感謝

Answer 1

代碼<?php echo time() * 1000 ?>將只運行一次，當頁面由php提供服務時。每次我們看到代碼時，它都不會從服務器更新它。

嘗試這樣：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
    //Variables 
    var epoch_time = <?= time() ?>000; 
    var startHour = 19; 
    var finalHour = 3; 

    //Funcion principal 
    function timer_test() { 
     var date1 = new Date(epoch_time); 
     var seconds = date1.getSeconds(); 
     var minutes = date1.getMinutes(); 
     var hours = date1.getHours(); 
     var diferencehours = startHour - hours -1; 
     var diferenceminutes = 60 - minutes -1; 
     var diferenceseconds = 60 - seconds; 

     if (hours > startHour | hours < finalHour) { 
      $("#timer").html("All of our services are running."); 
     } 
     else if(hours < startHour && hours >= finalHour) { 
      $("#timer").html(diferencehours + ":" + diferenceminutes + ":" + diferenceseconds); 
     } 

     epoch_time += 1000; 
    } 

    $(function() { 
     //Interval 
     setInterval(timer_test,1000); 
    }); 

    </script> 

    <div id="timer"></div> 

Answer 2

不知道從哪裏開始，可以用大量的清理：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
var serverTime = <?php print time()?>; 
var tracking = {start:19,end:3}; 
tracking.timer = setInterval(function() { 

    var now = new Date(serverTime); 
    var seconds = now.getSeconds(); 
    var minutes = now.getMinutes(); 
    var hours = now.getHours(); 

    if (hours > tracking.start || hours < tracking.end) { 
     $("#timer").html("All of our services are running."); 
    } else { 

     var remainHours = tracking.start - hours -1; 
     var remMinutes = 60 - minutes -1; 
     var remSeconds = 60 - seconds; 
     $("#timer").html(remainHours + ":" + remMinutes + ":" + remSeconds); 
    } 

    serverTime+=1000; 

},1000); 

</script> 

TL;博士：你需要每個刻度遞增服務器時間。

1. 我建議從主腳本內部排除php，或將它移動到頂端，以便更容易發現，因爲它可能很難找到/維護。
2. 清理了jquery調用，你不需要把它們放在var中。
3. 消除額外的變量。
4. 一般清理/可讀性。