前端点击按钮触发计时器

一：前后端分离项目vue中的计时器

html

<el-input placeholder="请输入验证码" v-model="sms_code">
            <template slot="append">
              <el-button type="success" round @click="sms_btn" :disabled="sms_status">{{ sms_info }}</el-button>
            </template>
          </el-input>

数据属性

data() {
    return {
      sms_code: "",
      sms_info: '获取验证码',
      sms_status: false,
    }

方法

 // 发送验证码
    sms_btn() {
      this.$axios.get(`${this.$settings.host}/users/sms_code/?tpl=login&phone=${this.phone}`)
        .then((res) => {
          this.$message.success('短信发送成功，请稍等！')
          // 倒计时
          // 生成一个时间
          let time = 60;
          // 生成一个自动计时的函数
          let t = setInterval(() => {
            // time 自减
            if (time >= 0) {
              // 先减少，在做其他的事情，不然，等待一秒，加上网络延迟，效果不好
              --time;
              this.sms_status = true
              this.sms_info = `${time}后可再次点击`;
            } else {
              // 清除函数
              clearInterval(t);
              this.sms_status = false;
              this.sms_info = '获取验证码';
            }
          }, 1000)
        })
        .catch((error) => {
          // console.log(error.response)
          this.$message.error(error.response.data)
        })
    },

二，前后端不分离项目计时器

# 1.计时器
function smsWait() {

            // 获取button按钮
            var $smsBtn = $('#btnSms');
            // 给框加禁止使用的属性
            $smsBtn.prop('disabled', true);
            // time = 60
            var time = 60;
            // 函数
            var remind = setInterval(function () {
                // 给button按钮添加文本
                $smsBtn.val('请等待' + time + '重新发送');
                // 自减
                time = time - 1;
                // 当time<1,停止函数，恢复按钮
                if (time < 1) {
                    // 清除函数
                    clearInterval(remind)
                    $smsBtn.val('点击获取验证码').prop('disabled', false);
                }
            }, 1000)
        }



# 2.
// 获取焦点 input红框消失 this： 当前操作的对象
                $('input').focus(function () {
                    $(this).removeClass('red_input')
                })

3.错误信息渲染

// 错误信息渲染 {mobile_phone: ['手机号格式错误！']}
                                // 错误时当前input框变红
                                $.each(res.msg, function (key, value) {
                                    $('#id_' + key).addClass('red_input').next().text(value[0])
                                    // attr 只有添加的一个属性 其他的全部消失 addClass 在原有的基础上添加类
                                })

4.清空信息

$('.error-msg').empty();