1

I'd like to ask you guys why this jQuery clock it's working properly to display the server time but instead it displays the time on the PC when you browse the website (and I want to display only the server side time from machine).

jQuery1

         $(function($) {
          var pstOptions = {
            timeNotation: '12h',
            am_pm: true,
            utc: true,
            utc_offset: <%SETTING_TIMEOFFSET%>,
            fontFamily: 'Verdana, Times New Roman',
            fontSize: '11px',
            foreground: 'white',

            background: 'black'
          }
          $('.jclockPST').jclock(pstOptions);
        });

jQuery2

 /*
 * jQuery jclock - Clock plugin - v 0.2.1
 * http://plugins.jquery.com/project/jclock
 *
 * Copyright (c) 2007-2008 Doug Sparling <http://www.dougsparling.com>
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */
(function($) {

  $.fn.jclock = function(options) {
    var version = '0.2.1';

    // options
    var opts = $.extend({}, $.fn.jclock.defaults, options);

    return this.each(function() {
      $this = $(this);
      $this.timerID = null;
      $this.running = false;

      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

      $this.timeNotation = o.timeNotation;
      $this.am_pm = o.am_pm;
      $this.utc = o.utc;
      $this.utc_offset = o.utc_offset;

      $this.css({
        fontFamily: o.fontFamily,
        fontSize: o.fontSize,
        backgroundColor: o.background,
        color: o.foreground
      });

      $.fn.jclock.startClock($this);

    });
  };

  $.fn.jclock.startClock = function(el) {
    $.fn.jclock.stopClock(el);
    $.fn.jclock.displayTime(el);
  }
  $.fn.jclock.stopClock = function(el) {
    if(el.running) {
      clearTimeout(el.timerID);
    }
    el.running = false;
  }
  $.fn.jclock.displayTime = function(el) {
    var time = $.fn.jclock.getTime(el);
    el.html(time);
    el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)},1000);
  }
  $.fn.jclock.getTime = function(el) {
    var now = new Date();
    var hours, minutes, seconds;

    if(el.utc == true) {
      if(el.utc_offset != 0) {
        now.setUTCHours(now.getUTCHours()+el.utc_offset);
      }
      hours = now.getUTCHours();
      minutes = now.getUTCMinutes();
      seconds = now.getUTCSeconds();
    } else {
      hours = now.getHours();
      minutes = now.getMinutes();
      seconds = now.getSeconds();
    }

    var am_pm_text = '';
    (hours >= 12) ? am_pm_text = " P.M." : am_pm_text = " A.M.";

    if (el.timeNotation == '12h') {
      hours = ((hours > 12) ? hours - 12 : hours);
    } else {
      hours   = ((hours <  10) ? "0" : "") + hours;
    }

    minutes = ((minutes <  10) ? "0" : "") + minutes;
    seconds = ((seconds <  10) ? "0" : "") + seconds;

    var timeNow = hours + ":" + minutes + ":" + seconds;
    if ( (el.timeNotation == '12h') && (el.am_pm == true) ) {
     timeNow += am_pm_text;
    }

    return timeNow;
  };

  // plugin defaults
  $.fn.jclock.defaults = {
    timeNotation: '24h',
    am_pm: false,
    utc: false,
    fontFamily: '',
    fontSize: '',
    foreground: '',
    background: '',
    utc_offset: 0
  };

})(jQuery);
4

3 回答 3

1

您的脚本在任何时候都不会联系您的服务器。您将需要一个输出时间的服务器端脚本。

创建一个名为的 PHP 文件GetTime.php并将其放在您的服务器上。它应具有以下内容：

PHP

<?php
echo time();

接下来，您需要修改脚本以从服务器脚本中获取时间。

您不希望连续执行此操作，因为它可能会导致更新时钟延迟。因此，在时钟初始化时执行此操作，并在服务器和客户端之间存储偏移量。然后每次在getTime()函数中检索客户日期时应用该偏移量。

jQuery

 /*
 * jQuery jclock - Clock plugin - v 0.2.1
 * http://plugins.jquery.com/project/jclock
 *
 * Copyright (c) 2007-2008 Doug Sparling <http://www.dougsparling.com>
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */
(function($) {

  $.fn.jclock = function(options) {
    var version = '0.2.1';

    // options
    var opts = $.extend({}, $.fn.jclock.defaults, options);

    return this.each(function() {
      $this = $(this);
      $this.timerID = null;
      $this.running = false;

      $.fn.jclock.getServerOffset($this);

      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

      $this.timeNotation = o.timeNotation;
      $this.am_pm = o.am_pm;
      $this.utc = o.utc;
      $this.utc_offset = o.utc_offset;

      $this.css({
        fontFamily: o.fontFamily,
        fontSize: o.fontSize,
        backgroundColor: o.background,
        color: o.foreground
      });

      $.fn.jclock.startClock($this);

    });
  };

  $.fn.jclock.getServerOffset = function(el) {
    //Want to make a synchronous call to the server to get the server time.
    $.ajax({
        url: "GetTime.php",
        async: false,
        context: el,
        success: function(result) {
            var serverDate = new Date(+(result) * 1000); //Convert the seconds to a number, and multiple by 1000 to get milliseconds.
            var clientDate = new Date();

            $this.serverOffset = clientDate - serverDate; //Set the offset between server and client.
        }
    });
  };

  $.fn.jclock.startClock = function(el) {
    $.fn.jclock.stopClock(el);
    $.fn.jclock.displayTime(el);
  };

  $.fn.jclock.stopClock = function(el) {
    if(el.running) {
      clearTimeout(el.timerID);
    }
    el.running = false;
  };

  $.fn.jclock.displayTime = function(el) {
    var time = $.fn.jclock.getTime(el);
    el.html(time);
    el.timerID = setTimeout(function(){$.fn.jclock.displayTime(el)},1000);
  };

  $.fn.jclock.getTime = function(el) {
    var now = new Date(new Date().getTime() - el.serverOffset); //Apply the server offset.
    var hours, minutes, seconds;

    if(el.utc == true) {
      if(el.utc_offset != 0) {
        now.setUTCHours(now.getUTCHours()+el.utc_offset);
      }
      hours = now.getUTCHours();
      minutes = now.getUTCMinutes();
      seconds = now.getUTCSeconds();
    } else {
      hours = now.getHours();
      minutes = now.getMinutes();
      seconds = now.getSeconds();
    }

    var am_pm_text = '';
    (hours >= 12) ? am_pm_text = " P.M." : am_pm_text = " A.M.";

    if (el.timeNotation == '12h') {
      hours = ((hours > 12) ? hours - 12 : hours);
    } else {
      hours   = ((hours <  10) ? "0" : "") + hours;
    }

    minutes = ((minutes <  10) ? "0" : "") + minutes;
    seconds = ((seconds <  10) ? "0" : "") + seconds;

    var timeNow = hours + ":" + minutes + ":" + seconds;
    if ( (el.timeNotation == '12h') && (el.am_pm == true) ) {
     timeNow += am_pm_text;
    }

    return timeNow;
  };

  // plugin defaults
  $.fn.jclock.defaults = {
    timeNotation: '24h',
    am_pm: false,
    utc: false,
    fontFamily: '',
    fontSize: '',
    foreground: '',
    background: '',
    utc_offset: 0
  };

})(jQuery);
于 2013-05-28T13:49:20.473 回答
0

var now = new Date();根据客户端的系统创建日期时间戳。我想这被称为客户端？

于 2013-05-28T13:21:11.773 回答
0

jQuery 运行客户端（在您用来浏览网站的 PC 上），因此它将使用客户端的时间。如果要使用服务器时间，则需要修改脚本并将当前服务器时间传递给脚本（并使用此时间而不是new Date()）。

于 2013-05-28T13:23:53.297 回答