前端点击按钮触发计时器

一:前后端分离项目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();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骑台风走

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值