一个准确的JavaScript倒计时怎么做

站上有个功能,叫推币竞拍。就是东西拿出来拍卖,在最后关头价高者得。

这个策略其实很有趣,普通玩家会很兴奋地不断地去拿币去拍。而老玩家则是静静等到最后快结束的时候,出高价,争取秒杀。

让我们想想页面上的表现。通常页面上会显示一个倒计时的标志,说离结束时间(比如17:00:00)还有多长时间。然后JS拿个定时器去触发事件,更新这个倒计时里面的html(比如还剩120秒)。

问题:还剩多长时间,这个leftTime, 是endTime – currentTime得到的。currentTime一般我们拿客户端的时间,也就是JS拿到的。而endTime,事实上的逻辑,却是服务器的时间。
也就是说,如果客户端(用户的机子)和服务器上的时间不一致,就一定会出现问题。
如果服务器的endTime比客户端的要早,那客户端在endTime的时候竞拍,服务端早就过了这时间,于是在服务端就会报说竞拍时间已过。反之则可能出现我出的价格比别人低,然后错失再次出价或前端已经不允许出价的机会。

所以一个比较正确的方法是,leftTime = endTime – currentTime + offset
这个offset是指服务器时间和客户端时间的差值。
获取offset也很简单,服务器输出一个时间,然后客户端马上判断当前时间和这个值的差值就可以了。

用PHP写的话差不多是这样的。挺简单的。

<script>
<?php
$time = time();
echo "var server_time = new Date($time);";
?>
var client_time = new Date();
var offset = server_time - client_time/1000;
</script>

这里我把offset写成以秒为单位。如果要毫秒的,就在PHP上改成取毫秒的就OK了。剩下的事儿就是一个正常的倒计时了。这时候客户端的时间和服务端的时间就同步上了。

简单的小技巧,但往往被程序员忽略,却会引起用户使用上的困扰、麻烦。所以程序员不能只会写代码,而要从系统的眼光来写代码,从用户的角度来写代码。

Copyright © 2012. All Rights Reserved.

发表评论

电子邮件地址不会被公开。 必填项已用*标注