js 短信验证码60s倒计时

在与用户的交互中，很多时候需要验证用户的身份信息，其中手机号码验证是其中的一项：

用户输入手机号码，获取验证码，我们验证了手机号码与验证码后，才会让用户进行下一步操作。

html代码大致如下：

<form class="midautumn-input">
        <label for="mobile">输入手机号，马上领取</label>
        <div class="midautumn-input-text">
            <input id="mobile" type="text" class="mobile" name="mobile" maxlength="11" placeholder="请输入手机号"/>
        </div>
        <div>
            <input class="code varifycodeOf4"  type="text" name="code" maxlength="4"placeholder="请输入验证码"/>
            <a class="button" id="getSms">获取验证码</a>
            <a class="count"><span id="time">60</span> 秒</a>
        </div>
    </form>
    <div class="detail">
        <a class="detail-button">立即领取</a>
        <div class="activity-toggle">活动规则
            <br/>
            <i class="icon icon-arrow"></i>
        </div>
        <div class="activity-toggle-content" style="display: none">
        <p>1. 本活动适用于所有微理财关注用户；</p>
        <p>2. 活动期间，关注用户每日中午12点在微理财对话框输入“我爱看电影”，前100名参与用户即可获赠观影券码2份；</p>
        <p>3. 每份观影券码可兑换2D/3D电影票一张，不限场次；券码有效期为2016年12月31日；</p>
        <p>4. 活动期间每位用户仅有一次机会获赠观影券，同一微信号或同一手机号认为是同一用户；获赠影券由微理财渠道发放券码给获奖用户；</p>
        <p>5. 每份观影券码仅能使用一次，一经使用，将无法进行退票和退款，请慎重购票；</p>
        <p>6. 在法律许可的范围内，本活动最终解释权属于国泰君安证券所有；活动规则如有调整，以最新公告为准；</p>
        </div>
    </div>

一般情况下，在用户输入手机号码后一分钟内，系统不会再给用户发送，所以我们需要在页面上给用户展示一个60s倒计时的对话框，这个需要js来实现。

如下：

    // 倒计时
    var seconds = 60;
    $("#getSms").on("tap",function(){
        if(!$(".mobile").valid()){
            return;
        }
        sendSms();
        $(this).hide();
        $(this).next('.count').css('display','inline-block');
        var fun = setInterval(function(){
            seconds -= 1;
            $('#time').html(seconds);
            if(seconds == 0){
              clearInterval(fun);
              $('.count').hide();
              $('#getSms').css('display','inline-block');
              $('#time').html(60);
              seconds = 60;
            }
          },1000);
    });

再辅以css

.count{
  display: none;
  margin-top: 10px;
  height: 40px;
  width: 35%;
  margin-left: 5%;
  line-height: 40px;
  border: 1px solid #9F9DBD;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 1.6rem;
}

.count属性最关键的就是第一行，让倒计时的div标签隐藏，当用户点击“获取验证码”后，“获取验证码”的div标签隐藏，“60s”的标签显示，并且每隔1s定时刷新，这样就实现了我们需要的60s倒计时了。