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