创建php直播时钟

时间:2016-05-01 11:07:27

标签: php time clock

如何使用php创建一个活动时钟,从服务器获取时间而不是用户pc时间[不是javascript]

我使用下面的代码,但使用php变量时停止了时间

<form name="Tick">
<input type="text" size="12" name="Clock">
</form>
<script type="text/javascript">
function show(){
    var hours="<?php echo $myhour; ?>"
    var minutes="<?php echo $mymin; ?>"
    var seconds="<?php echo $mysec; ?>"
    var dn="AM" 
    if (hours>12){
        dn="PM"
        hours=hours-12
        //this is so the hours written out is in 12-hour format, instead of the default //24-hour format.
    }
    if (hours==0)
        hours=12
    //this is so the hours written out when hours=0 (meaning 12a.m) is 12
    if (minutes<=9)
        minutes="0"+minutes
    if (seconds<=9)
        seconds="0"+seconds
    document.Tick.Clock.value=
    hours+":"+minutes+":"+seconds+" "+dn
    setTimeout("show()",1000)
}
    show()
</script>

3 个答案:

答案 0 :(得分:9)

您可以使用ajax

<强> timestamp.php

<?php
    date_default_timezone_set('YOUR TIMEZONE');
    echo $timestamp = date('H:i:s');

<强>的jQuery

$(document).ready(function() {
    setInterval(timestamp, 1000);
});

function timestamp() {
    $.ajax({
        url: 'http://localhost/timestamp.php',
        success: function(data) {
            $('#timestamp').html(data);
        },
    });
}

<强> HTML

<div id="timestamp"></div>

答案 1 :(得分:2)

PHP是一种服务器端编程语言,Javascript是一种客户端编程语言。

填充变量的PHP代码只会在加载网页时更新,之后只剩下Javascript代码而已。

我建议你搜索一本基本的编程书,它提到客户端和服务器端代码等概念,因为(而不是试图苛刻)你似乎对这些东西的工作方式有很大的误解。

答案 2 :(得分:1)

我会从服务器发送时间戳,以获取当前服务器时间的快照,然后让JS从那里接管。 JS可以使本地时钟保持与服务器的同步状态,并且您可以每x分钟/小时运行一次新的ajax调用,以重新同步新的时间戳。

我还没有测试过,但是如果准确性不是问题,那么它应该可以很好地工作并将服务器工作降至最低。

编辑:实际上,我实际上是为我正在研究的项目完成此操作的,并且效果很好。

您只需要将时间戳从服务器添加到JS中-由于我的页面是.php页面,因此我可以这样做:

<h1 id="current-time-now" data-start="<?php echo time() ?>"></h1>

然后我可以获取该时间戳并像这样使用它:

    //get new date from timestamp in data-start attr
    var freshTime = new Date(parseInt($("#current-time-now").attr("data-start"))*1000);
    //loop to tick clock every second
    var func = function myFunc() {
        //set text of clock to show current time
        $("#current-time-now").text(freshTime.toLocaleTimeString());
        //add a second to freshtime var
        freshTime.setSeconds(freshTime.getSeconds() + 1);
        //wait for 1 second and go again
        setTimeout(myFunc, 1000);
    };
    func();

从那里您可以运行ajax调用以获取新的时间戳,以了解您的项目需要多久一次。