倒计时器使用jquery或谷歌应用程序引擎?

时间:2009-06-11 04:54:00

标签: javascript jquery google-app-engine

我需要做一个倒计时时钟,它会计算我选择的日期,使用jquery或谷歌应用引擎(Python)的日期,小时,分钟和秒数。

我使用Javascript创建了一个计时器,但是我使用了系统时间。

我需要使用服务器时间。任何机构都可以根据服务器UTC时间给出构建倒计时器的想法。

6 个答案:

答案 0 :(得分:6)

  

我使用Javascript创建了一个计时器,但是我使用了系统时间。

如果JavaScript确实满足您的需求,那么JavaScript代码也可以很容易地变为动态。在代码中,无论在何处初始化当前系统时间,只需使用您选择的语言(Python)插入服务器时间。换句话说:使用您的服务器语言(Python)就像现在一样输出脚本,除了替换初始化当前时间的部分。

在PHP中,一些伪代码(不确定Date()构造函数的参数)可能看起来像,例如:

// my_countdown_script.php
[..]
var startTime = new Date( <?php echo time(); ?> );
[..]

然后,您将包含插入服务器时间的PHP文件,而不是包含您的JavaScript:

<script type="text/javascript" src="my_countdown_script.php"></script>

好处是:这将适用于任何支持您已创建的JavaScript的浏览器。

(在某些更高版本中,您的JavaScript可能包含一些初始化程序,这些初始化程序允许您在将HTML包含在HTML中之后设置当前时间。这将允许实际的JavaScript库是静态的,因此可以通过浏览器进行缓存。)

答案 1 :(得分:4)

可以在http://keith-wood.name/countdown.html

找到一个好的jquery插件

然后你需要做的就是通过在初始化之前在页面上设置一个变量来传递脚本语言php / asp.net的新日期,并更新_cal​​culatePeriods函数来获取该变量而不是现在的变量。 / p>

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
    var servernow = new Date( <?php echo time(); ?> );
    var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    $('#defaultCountdown').countdown({until: austDay});
    $('#year').text(austDay.getFullYear());
});


</script>

来自js / jquery.countdown.js

 * Calculate the requested periods between now and the target time.
   @param  inst  (object) the current settings for this instance
   @param  show  (string[7]) flags indicating which periods are requested/required
   @param  now   (Date) the current date and time
   @return  (number[7]) the current time periods (always positive)
            by year, month, week, day, hour, minute, second */
_calculatePeriods: function(inst, show, now) {
    // Find endpoints
    inst._now = servernow;

约什

答案 2 :(得分:3)

你可以从http://just-the-time.appspot.com/可靠地获得服务器时间 - 这是我用来帮助提问堆栈溢出的应用引擎应用程序,实际上是;-)。其简单的代码在http://code.google.com/p/just-the-time/开源,我可以轻松添加您需要的功能(一个页面,查询您选择的未来日期,返回日期,小时,分钟和秒,在一些容易使用格式) - 请告诉我!

答案 3 :(得分:1)

jQuery Timers是我过去使用的一个插件,发现非常好。

只需将两个JavaScript变量设置为倒计时的当前时间和目标时间,并使用jQuery计时器更新“剩余时间”。如果需要,您可以添加另一个重新同步服务器和客户端时间的时间,每隔一段时间 - 尽管这可能不是必需的。

答案 4 :(得分:0)

为什么不简单地使用日期对象的UTC方法?

请参阅:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date

所有本地时间方法都有UTC对应

编辑:这是为了与他在javascript中的现有实现一起使用。

如果你真的想确定你获得服务器时间,请执行XHR请求(对于任何事情)并检查日期标题

答案 5 :(得分:0)

所以基本上你需要两件事:

  1. 使用服务器时间显示倒计时时间的页面。
  2. 客户端更新时间。
  3. 以这样的方式呈现您的时间服务器端:

    <span id="countdown" title="1245515631554">4 min. and 24 seconds</span>
    

    标题是您可以轻松解析的当前时间的时间戳。您也可以解析文本,但这需要更复杂的代码。

    然后添加一些获取时间并每秒更新文本的Javascript。设置获取日期的超时,更新日期并设置文本。