发送验证码和倒计时代码

　前言

　　前段时间有一个移动端的项目需要实现注册登录发送验证码和开课倒计时，贴出来供以后使用。代码如下：

　正文

　　发送验证码：

      html：

<button id="send_identifying">
      发送验证码
</button>

　　css

button {
    font-size: 16px;
    height: 100px;
    line-height: .36rem;
    text-align: center;
    border-radius: 5px;
    background: #ff5e3a;
    color: #fff;
    border-style: none;
    vertical-align: middle;
    padding: 0 20px
}

　　js

$('#send_identifying').on('click', function () {
    this.disabled= true;
    var starting = 60;
    var start1;
    var that = this
    var time = setInterval(function () {
        if (starting > 0) {
            starting--;
            start1 = starting > 10 ? starting:`0${starting}` 
            $(that).html(`${start1}后重新发送`);
            $(that).css('background','#95918f');

        } else if (starting === 0) {
            $(that).html(`发送验证码`);
            clearInterval(time);
            $(that).css('background','#ff5e3a');
            that.disabled = false;
        }
    }, 1000)
})

 　　效果图：

　　

　　 ps：在开发时遇到过一个问题，就是一开始没有用button按钮，用的是div标签，发现一直点击的话会出现闪烁重置情况，这不是很好的需求，用解绑事件也不管用，最后同事说用button吧，我才想到button有个disabled的属性，可以在点击时赋值为true，时间到了重新再赋值为false。样式自行调试。

　　 

 　　倒计时

　　 html

<p class="timing" id="start_timing">
    即将开始 00:00:00
</p>

　　js

//倒计时  
function timer(intDiff) {
    window.setInterval(function () {
        var day = 0,
            hour = 0,
            minute = 0,
            second = 0;//时间默认值        
        if (intDiff > 0) {
            day = Math.floor(intDiff / (60 * 60 * 24));
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
        }
        if (hour <= 9) hour = '0' + hour;
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
        $('#start_timing').html(`即将开始 ${hour}:${minute}:${second} `)
        intDiff--;
    }, 1000);
}
timer(2000)

　　效果图：

       

 　　ps：这里的参数我自己用的是秒数，因为有一次数据交互中发现后台传来的时间都是秒，所以参数用秒数来传参。