问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js活动倒计时实现思路？

头像
_ThinkPad
    20852431

    我想做个活动页面，页面有个倒计时展示，开始时间和结束时间从后台服务器获取。然后情况可能是这样的：

    1：如果当前时间距离活动开始时间(活动还没有开始)的情况下。显示活动还没有开始距离活动开始还有多少时间。

    2：如果设置的开始时间就是当前时间，那么倒计时开始展示，一直到结束时间，然后显示活动已经结束。

    情况是这样，想请教下具体怎么实现的，还有就是当前时间应该是服务器时间，客户端的时间有可能本地修改了之后就不对了

    javascripthtml5jquery
    阅读 10.3k
    4 个回答
    得票最新
    头像
    member
      6.2k11026
      ✓ 已被采纳

      没时间看的，直接看下文 「倒计时实现代码」

      js获取服务器时间

      使用Ajax（cache: false）去GET当前js文件

      读取其HTTP的Date头（服务器端时间），根据此头计算客户端与本地时间的差异。

      以下代码为原理讲解，并没考虑到跨域的问题，下文的JS文件中考虑到看跨域问题，具体以JS文件为
      为什么我会使用ajax的方法，而非百度就可以得到的一些答案，详情可以查看：https://www.oschina.net/quest...

      //获取外联的js文件路径
var scripts = document.getElementsByTagName("script");
var thiscript = scripts[ scripts.length - 1 ];
var ajaxURL = thiscript.src;
var deltaTime = 0; //得到deltaTime 之后,随时可以用 客户端时间 + deltaTime，从而得到服务器时间
$.ajax({
    url:ajaxURL,
    type:'GET',
    cache:false, //禁止缓存
    async:false, //同步
    dataType:'text', //不解析内容
    success:function(data,textStatus,XMLHttpRequest){
        deltaTime = (new Date(XMLHttpRequest.getResponseHeader('Date'))).getTime() - (new Date()).getTime();
    },
    error:function(XMLHttpRequest, textStatus, errorThrown) {
        deltaTime = (new Date(XMLHttpRequest.getResponseHeader('Date'))).getTime() - (new Date()).getTime();        
    },
    timeout:5000
});

      然后每次计算倒计时的时候

      setInterval(function(){
    var 目标时间 = new Date('01/31/2018 00:00:00')
    时间 = (new Date).getTime() + deltaTime;
    var 倒计时 = 目标时间 - 时间;
}, 800); //注意小于1000(为什么?)

      这个涉及到以下知识点：

      • HTTP头知识

      • Ajax知识（同步、异步、Cache）

      • 浏览器<head>加载顺序、加载执行JS时间，浏览器渲染时间

      • 网络通讯误差、服务端脚本执行误差

        （看起来文中并没有提到这个啊，自己好好想一下为什么）

      当然，这个答案也并不完美，也会有毫秒级别的误差（Date头无法输出毫秒）。
      如果想修正时间到100ms以内，可以在1500毫秒内，重复取deltaTime多次，然后使用算法依次的修正误差

      倒计时实现代码：

      获取倒计时、获取服务器时间，计算客户端和服务器时间的差异

      http://www.load-page.com/static/js/jquery.simpletimer.js
* 修正了新版本jQuery的问题，代码更加精简

      使用方法：（本地文件无法测试，必须有服务器环境）

      //参考代码 http://hb.qq.com/fly_test.htm
<div id="a" data-target="08/11/2015 20:00:00">00:00:00</div>Javascript日期格式：月/日/年 时:分:秒
<script>
$('#a').simpleCountdown('%D天%H小时%M分%S秒 总秒数为:%s');
</script>
去掉%D 会自动将天累加到时
去掉%H 会将时累加到分

      服务器

      服务器端需要满足如下条件：

      • Redis队列记录秒杀瞬间数据，并记录用户ID、秒杀时间（毫秒）

      • Redis数据回写到MySQL

      • 以上条件满足不了，那就弄个好一点的MySQL

      • 时间同步，JS、PHP、MySQL、Redis的这些服务器时间必须是同步

      秒杀只是一定程度上的公平，带有运气性质，所以算法在一定程度上公平就好了

      楼主说的篡改本地时间的问题

      不论你的本地时间多么离谱，deltaTime的计算都是正确的，然后倒计时也是实时取,显示绝对正确
      除非你在倒计时过程中修改本地时间，那样你只是玩单机，服务器端有时间的，你改也就自娱自乐

      头像
      Youthon
        131310

        这种事还是交给后端吧，既然都说了用服务器时间当然就直接在后端算好还剩多久时间&是否开始活动之类信息然后返回输出到前端页面，如果要实时每秒倒计时的话可以前端拿到时间再每秒减。

        头像
        不爱吃西红柿的鱼
          8.2k21124

          谢邀。

          这种是一个比较常见的需求了吧，常见于电商，下面以秒杀为例子。

          基本思路是，加载一个页面，ajax请求或者填页面模版，获取到开始和结束时间，后面以ajax请求为例子。

          然后用js读取当前系统的时间，再读取响应头（ajax请求）中的系统时间，两相对比，设定一个差值，一般情况两者应该相差不大，差别顶多是毫秒级的，所以，对时到分钟数，如果两端不一致就重刷，或者提醒系统时间异常（注意浏览器时间的时区和服务器是否一样，服务器大都是格林威治时间）。

          然后，对比开始和结束时间，出不同的按钮。

          关键点来了，可能也是题主担心的地方，就是系统时间不准确或者被别有心机的用户篡改，这个时候该怎么处理或者容错。

          这个时候应该按照正常的js逻辑显示相应的按钮，比如秒杀按钮，用户点击后，依然发送ajax请求，因为前端永远都保证不了数据的准确性。后端收到请求，先检查是否在活动时间内，再进下一个判断支，不然直接返回报错，刷新页面或者提醒时间。

          描述的比较冗杂，很大一坨逻辑，就不想写demo了，思路清晰就好。

          头像
          unofficial
            1.5k51121

            谢邀。看到题主的描述以及其它答案基本都解决问题了，本着邀请还是说一下自己的观点。
            整理一下思路，无论是服务端获取时间还是客户端获取时间，在活动前后防止暴露请求数据或者链接。
            前台js执行倒计时操作，到时后请求指定接口返回数据或者重定向页面，看实际方案。但有一点，这次请求服务端验证当前请求的服务端时间与活动时间是否一致再执行其它逻辑。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题