來自PHP變量（AJAX）的JS倒數計時器

Question

下面的腳本返回自上次客戶以分鐘和秒鐘註冊以來的時間。註冊日期的變量從單獨的PHP文件中提取。

如何在新客戶註冊後將兩者結合起來以獲得動態結果（AJAX）。

下面的腳本運行良好，但只在刷新時更新。

的index.php

<?php 
    require_once('get_file.php') 
?> 

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 

<script type="text/javascript"> 
var currenttime = <?php print json_encode($todaysDate, JSON_UNESCAPED_SLASHES) ?>; 
var lastsale = <?php print json_encode($orderCreated, JSON_UNESCAPED_SLASHES) ?>; 

var montharray=new Array("01","02","03","04","05","06","07","08","09","10","11","12") 
var serverdate=new Date(currenttime) 
var lastordercreated=new Date(lastsale) 

function padlength(what){ 
    var output=(what.toString().length==1)? "0"+what : what 
    return output 
} 

function displaytime(){ 
    serverdate.setSeconds(serverdate.getSeconds()+1) 

    // Todays Date 
    var datestring=padlength(serverdate.getDate())+"/"+montharray[serverdate.getMonth()]+"/"+serverdate.getFullYear() 

    // Current Time 
    var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds()) 

    // Last Ordered Count 
    var lastorderedcount=padlength(serverdate.getTime()) - padlength(lastordercreated.getTime()) 

    var minutes = Math.floor((lastorderedcount % (1000 * 60 * 60))/(1000 * 60)); 
    var seconds = Math.floor((lastorderedcount % (1000 * 60))/1000); 
    var lastordercountdown = minutes+":"+seconds 

    // Output 
    document.getElementById("todaysdate").innerHTML=datestring 
    document.getElementById("currenttime").innerHTML=timestring 
    document.getElementById("lastordered").innerHTML=lastordercountdown 

} 

function updateAjax() { 
    $.ajax({ 
     url: 'getLastData.php', 
     success: function(res) { 
      currenttime   = res.currentDate; 
      lastsale   = res.orderCreated; 
      serverdate   = new Date(currenttime); 
      lastordercreated = new Date(lastsale); 
      console.log(res); 
     } 
    }); 
} 

window.onload=function(){ 
setInterval('displaytime()', 1000) 
setInterval(updateAjax, 1000) 
} 
</script> 

<span id="lastordercountdown"></span> 

getLastData.php

<?php 
    require_once('get_data.php'); 

    print json_encode([ 
     'currentDate' => $todaysDate, 
     'orderCreated' => $orderCreated 
    ],JSON_UNESCAPED_SLASHES); 
?> 

Answer 1

使用jQuery，你可以做這樣的事情：

getLastCustomer.php：

<?php 
    require_once('get_file.php') 
?> 

echo json_encode(['currentDate' => $todaysDate, 'lastRegistered' => $lastRegistered]); 

主腳本：

<script type="text/javascript"> 

var currenttime = '<?php print (json_encode($todaysDate)) ?>' 
var lastregistered = <?php print (json_encode($lastRegistered)) ?> 

var montharray=new Array("01","02","03","04","05","06","07","08","09","10","11","12") 
var serverdate=new Date(currenttime) 
var registrationdate=new Date(lastregistered) 

function padlength(what){ 
    var output=(what.toString().length==1)? "0"+what : what 
    return output 
} 

function displaytime(){ 
    serverdate.setSeconds(serverdate.getSeconds()+1) 


    // Last Registration Countdown 
    var lastregcount=padlength(serverdate.getTime()) - padlength(registrationdate.getTime()) 

    var minutes = Math.floor((lastregcount % (1000 * 60 * 60))/(1000 * 60)); 
    var seconds = Math.floor((lastregcount % (1000 * 60))/1000); 
    var lastregcountdown = minutes+":"+seconds 

    document.getElementById("registrationcount").innerHTML=lastregcountdown 

} 

function updateAjax() { 
    $.ajax({ 
     url: 'getLastCustomer.php', 
     dataType: 'json', 
     success: function(res) { 
      currenttime  = res.currentDate; 
      lastregistered = res.lastRegistered; 
      serverdate  = new Date(currenttime); 
      registrationdate = new Date(lastregistered) 
     } 
    }); 
}   

window.onload=function(){ 
    setInterval(displaytime, 1000) 
    setInterval(updateAjax, 30 * 1000) 
} 
</script>