Js获取验证码倒计时

更新日期: 2021-05-14阅读: 2.1k标签: 验证码

网站中为了防止恶意获取验证短信、验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果。比如:做注册页面时会有获取验证码按钮,点击后过60秒才能重新获取,数字是递减的到0时重新回到最初的状态。实现这个功能只需要一个setInterval和一个clearInterval就能搞定了,不需要太多的代码


1.jquery的实现:

/**
* 倒计时
* e 代表发送按钮对象
*/
function resetTime(e){
var second = 60;
var timer = null;
timer = setInterval(function(){
second -= 1;
if(second >0){
$(e).attr('disabled',true);
$(e).text(second + "秒后获取验证码");
}else{
clearInterval(timer);
$(e).attr('disabled',false);
$(e).text("发送短信验证码");
}
},1000);
}


2、在vue实现倒计时获取验证码效果:

这里我们没有使用setInterval,而使用setTimeout,每1秒钟递归来实现的。注意区别:

<template>
<div>
<el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
</div>
</template>

<script>
export default {
data() {
return {
disabled: false,
time: 5,
btntxt: "发送验证码",
};
},
methods: {
sendcode() {
this.time = 5;
this.timer();
},
//发送手机验证码倒计时
timer() {
if (this.time > 0) {
this.disabled = true;
this.time--;
this.btntxt = this.time + "秒";
setTimeout(this.timer, 1000);
} else {
this.time = 0;
this.btntxt = "发送验证码";
this.disabled = false;
}
},
}
}
</script>

<style scoped>
.el-button {
margin: 100px 50px;
}
</style>



链接: https://www.fly63.com/article/detial/10294

API 交互中怎么做好图片验证码?

在传统的 Web 开发过程中,处理图形验证码很简单,只需要在后台用随机字符串生成一个图片,将验证码内容放进 Session 即可,用户提交表单时从 Session[1] 取出判断即可。

js点击发送验证码 xx秒后重新发送

用于一些注册类的场景,点击发送验证码,xx秒后重新发送。利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击。

jQuery实现发送验证码30s倒计时,且刷新页面时有效

在这里讲一讲这个案例的实现思路吧(个人见解)。。核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数。这个函数会根据当前的 cookie 值判断 是否处于倒计时阶段

如何实现图形验证码?

细心的同学可以发现,现在很多网站当登录多次之后就会出现一个图形验证码,或是当提交表单、或点击获取手机验证码等等场景都会有图形验证码的出现。那么图形验证码是为了解决什么问题而出现的呢?

移动端手机验证码四格、六格的input实现

最近接的新项目,登录注册页根据需求要使用手机号获取验证码登录或者注册,一开始的想法是要做6个inputshur输入框,但是光标问题太严重。在网上看别人的实现方法,发现可以用一个input+6个span或者6个div来做,经过构思

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!