最新消息:文章中包含代码时,请遵守代码高亮规范!

js实现短信验证码倒计时效果【原创】

JavaScript Aimee 180浏览 0评论

在我们的生活中,用手机接收短信验证码是一件很平常的事情,当我们点击获取短信验证码按钮后,需要等待一定时间才能够重新获取短信验证码。那么,短信验证码倒计时效果是如何实现的呢,以下将附上代码片段进行讲解:

倒计时时间以60s为例:

html代码如下:

<button id="btn">获取短信验证码</button>

js代码如下:

var countdown = 59;
function settime() {
    if (countdown == '-1') {
        $('#btn').attr("disabled", false);
        $('#btn').css("background-color", "red");
        $('#btn').text("重新获取验证码");
        countdown = 59;
    } else {
        $('#btn').attr("disabled", true);
        $('#btn').css("background-color", "gray");
        $('#btn').text("重新发送"+countdown);
        countdown--;
        setTimeout(function () {
            settime()
        }, 1000);//1s后执行settime()函数;
    };
};
$("body").on('click',"#btn",function(){
    settime();
});

代码讲解如下:

首先设置变量countdown为倒计时时间60s,之后定义settime()函数,点击获取短信验证码按钮时执行settime()方法。

点击获取短信验证码按钮,当countdown数值为-1时,删除禁用input元素,背景颜色变为红色,标签内文字变为”重新获取验证码”。否则,禁用input元素,背景颜色变为灰色,标签内文字变为”重新发送”附带倒计时剩余秒数,且1s后执行settime()方法。

另外,如果html中使用的是input标签,那么,在js代码中需要稍作调整:

将代码:

$('#btn').text("重新获取验证码");
$('#btn').text("重新发送"+countdown);

改为:

$('#btn').val("重新获取验证码");
$('#btn').val("重新发送"+countdown);

即可。

 

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22476.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者aimee123的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!