Question

我刚刚写了另一个问题，但它没有很好的写法和可理解的，在这里我将粘贴我做过的工作，以及我的问题：

我想在我的网页上显示一个时钟（它基于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>

我发现的一个问题是，时钟刚刚停止，时间根本不会改变。

解决方案？我怎么能改善这个？

由于

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; dr：您需要在每次滴答时增加服务器时间。

我建议在主脚本中排除php，或者将其移到顶部以便更容易发现，因为它很难找到/维护。
清理jquery调用，您不需要将它们放在var。
删除了额外的变种。
一般清理/可读性。

PHP / Jquery时钟+倒计时

2 个答案: