来自PHP变量的JS倒计时器(AJAX)

时间:2017-03-02 15:56:39

标签: javascript php jquery ajax

以下脚本返回自上次客户以分钟和秒数注册后的时间。注册日期的变量是从单独的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);
?>

1 个答案:

答案 0 :(得分: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>