H5倒计时的实现

在最近开发的界面中有一个，更换手机号，涉及到发送验证码，倒计时的功能，简单总结一下

这里在js中用到两个重要的方法：setInterval()和setTimeout()
它们分别的含义是：

• setInterval()表示每隔多长时间执行一次，可以执行很多次
• setTimeout()表示间隔多长时间之后执行，只会执行一次

基于这两个方法的组合，并在任务完成时通过clearInterval方法移除掉setInterval方法，倒计时的效果就出来了，下面是完整的代码，并带有详细的注释

    //执行倒计时方法
    countdownAction: function () {
        var time = 60;
        var code = $("#code");//#后面为创建标签的id
        code.attr("disabled", "disabled");//通过css，在倒计时执行期间，禁止标签的点击事件
        code.css("background-color", "#cccccc");//改变标签的背景颜色
        var set = setInterval(function () {//执行倒计时方法，一秒钟执行一次
            --time;
            code.val(time);//改变标签的显示，显示为数字倒计时
        }, 1000);//此方法后面跟的是毫秒级单位
        setTimeout(function () {//60s之后执行的方法
            code.css("background-color", "#1BB771");
            code.attr("disabled", false).val("发送");
            clearInterval(set);//同时停止上面重复方法的执行
        }, 60000);
    },

之前采用的是input标签type为button去实现的，但是在真机上，样式与网页中出现了偏差，具体原因目前还不清楚，所以将实现的方式改成了div标签，下面是使用div标签，vue传递参数的实现代码

//div模块
<div type="button" :class="isCanSendCode? 'amendPhone-sendCode2' : 'amendPhone-sendCode'" id="code"
                    value="发送" @click='sendCodeAction'>{{time}}</div>
//css中控制显示的样式
//js方法
    countdownAction: function () {
        this.time = 60;
        var code = $("#code");
        code.css("background-color", "#cccccc");
        var that = this;
        that.isCanSendCode = false;
        var set = setInterval(function () {
            --that.time;
        }, 1000);
        setTimeout(function () {
            code.css("background-color", "#1BB771");
            that.time = '发送';
            that.isCanSendCode = ture;
            clearInterval(set);
        }, 60000);
    },