前段时间完成一个倒计时功能，有一些心得，希望与大家分享。 众所周知，一个静态按钮加上动态效果，更能吸引用户点击，如下图按钮旁的礼盒打开效果： 如果整点时希望吸引更多的用户点击，该怎么办呢？ 没错，给它加上整点前的倒计时效果。 很多网站会出现倒计时功能，但是根据不同需求，其表现形式和逻辑千变万化。 下面借这篇blog谈谈自己的体会。 1，明确需求 用户进入页面，逢整点前十分钟开始倒计时，整点开始正计时，10分钟后停止计时功能，其它时间隐藏计时。 需求文字只有短短一句话，但包含的要求却很多，从中可以得到如下要点： 1）得到用户进入页面时间userTime； 2）既有倒计时，也有正计时； 3）需要对userTime进行判断，确定是倒计时，正计时还是隐藏计时； 4）如果是隐藏计时，并且用户一直未离开页面，计时功能到点也需要正常启动。 2，梳理逻辑 如果将开发功能比作搭建房屋的话，那逻辑梳理就好比搭建房屋框架，其重要性不言而喻。 将需求文字以示例（最好配图）展现，可以帮助理解，以9:00-10:00为例： 从图中已经有一个直观的了解，但是在开发初期，这块是我碰到最大问题。 一般需求，逻辑都较为简单，通俗说就是非黑即白；但这个需求涉及时间循环，更加复杂，因为要求每逢整点计时启动，所以一开始总在假设许多不同情况，陷入了自己设定的障碍，经过与同事讨论，抓住了问题的关键点——选取临界值。经过研究，决定选取分钟作为临界值，整个流程豁然开朗，用流程语言表示如下： 将复杂的现实模式转换成可计算的编程模型，这是前端开发工作中核心环节。 到这里为止，房屋框架搭建完成。 3，计时方法 利用javascript开发页面计时功能最常用的核心方法有2个：setTimeout和setInterval。 那到底选取哪个较为合适？ 其实都可以，甚至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 |
