【jmfans案例系列】获取验证码倒计时效果

JmFans

实现效果：点击“获取验证码”，10秒倒计时后，方可再次点击获取按钮，输入验证码，手机验证通过。

实现主要思路：
1、上次已经介绍了一个<倒计时效果>，但那个实现方式是通过不停的刷新本页面来实现，导致无法在该页面进行任何的操作，所以这次换一种思路来实现，确保能在倒计时的时候，能够输入验证码;
2、实现的思路和上篇文章<图片轮播>的一样，就是借用一个input部件的焦点，来作为循环的契机，从而达到循环的目的；
3、首先添加一个动态面板，两个panel，一个放获取验证码按钮，一个放倒计时按钮；
4、添加一个变量seconds，作为倒计时读秒用；
5、获取验证码按钮添加事件，手指点击时：
设置值（变量=11）-设置活动面板（至倒计时按钮层）-设置值（倒计时数=变量-1）-滚动到input部件（即验证码输入框）-设置焦点在input部件；
6、添加input部件（即验证码输入框）的事件，获得焦点时：
当倒计时数=10时，暂停（1000毫秒）-设置值（变量=10）-设置值（倒计时数=变量-1）-滚动到input部件（即验证码输入框）-设置焦点在input部件；
当倒计时数=9时，暂停（1000毫秒）-设置值（变量=9）-设置值（倒计时数=变量-1）-滚动到input部件（即验证码输入框）-设置焦点在input部件；
…
当倒计时数=0时，暂停（1000毫秒）-设置活动面板（至获取验证码层）。

原文地址：http://www.jmfans.com/archives/424