前段时间完成一个倒计时功能,有一些心得,希望与大家分享。
  众所周知,一个静态按钮加上动态效果,更能吸引用户点击,如下图按钮旁的礼盒打开效果:


  如果整点时希望吸引更多的用户点击,该怎么办呢?


  没错,给它加上整点前的倒计时效果。
  很多网站会出现倒计时功能,但是根据不同需求,其表现形式和逻辑千变万化。
  下面借这篇blog谈谈自己的体会。
1,明确需求
  用户进入页面,逢整点前十分钟开始倒计时,整点开始正计时,10分钟后停止计时功能,其它时间隐藏计时。
  需求文字只有短短一句话,但包含的要求却很多,从中可以得到如下要点:
1)得到用户进入页面时间userTime;
2)既有倒计时,也有正计时;
3)需要对userTime进行判断,确定是倒计时,正计时还是隐藏计时;
4)如果是隐藏计时,并且用户一直未离开页面,计时功能到点也需要正常启动。
2,梳理逻辑
  如果将开发功能比作搭建房屋的话,那逻辑梳理就好比搭建房屋框架,其重要性不言而喻。
  将需求文字以示例(最好配图)展现,可以帮助理解,以9:00-10:00为例:


  从图中已经有一个直观的了解,但是在开发初期,这块是我碰到最大问题。
  一般需求,逻辑都较为简单,通俗说就是非黑即白;但这个需求涉及时间循环,更加复杂,因为要求每逢整点计时启动,所以一开始总在假设许多不同情况,陷入了自己设定的障碍,经过与同事讨论,抓住了问题的关键点——选取临界值。经过研究,决定选取分钟作为临界值,整个流程豁然开朗,用流程语言表示如下:


  将复杂的现实模式转换成可计算的编程模型,这是前端开发工作中核心环节。
  到这里为止,房屋框架搭建完成。
3,计时方法
  利用javascript开发页面计时功能最常用的核心方法有2个:setTimeoutsetInterval
  那到底选取哪个较为合适?
  其实都可以,甚至setInterval的代码会相对少一些,但是在《javascript高级程序设计(第二版)》里有这样一段话:一般认为,使用超时调用来模拟间歇调用是一种最佳模式,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。
  想深入了解的同学可以看看这篇文章,点击这里
4,拆分时间
  先看效果图:


  从图中可以看到,时间以类似电子表形式展现,因为无法用普通字体来展示,只能用图片。
  如果用图片,有2个问题:
1)如何用图片展示变化的时间?
  比如说 11:58:13 ,来看看html代码:


  再看css代码:


  还有雪碧图:


  最后是倒计时的javascript代码:


  把时间变化与样式名对应起来,从而达到类似电子表的展现形式。
2)如何进一步拆分、秒、毫秒?
  接着上面的示例时间,通过javascript时间函数,可以取到11分,58秒,13毫秒;但这还不够,为了达到效果,还需要拆到个位数。这里给出一个简单的方法,利用toString方法把时间转换成字符串,再用字符串截取函数substr得到需要的结果,代码如下:


mySa
  把第四点内容延伸,充分发挥想象力,可以做出更多更炫的计时效果,比如数字滑动,翻牌等等。
  整个项目完成上线后,效果比预期好,点击进入的页面流量翻了一倍还多,如图:


  以上是自己的一些浅显体会,谢谢!
  有兴趣的同学还可以看看demo,点击倒计时30s!
  本文来自QQ游戏设计中心博客,原文链接:http://gdc.qq.com/?p=3473