jq实现短信倒计时

最新推荐文章于 2022-09-06 15:16:53 发布

承续原

最新推荐文章于 2022-09-06 15:16:53 发布

阅读量202

点赞数

分类专栏： js jquery 文章标签： jquery css html

本文链接：https://blog.csdn.net/weixin_47192707/article/details/109690359

版权

jquery 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

短信倒计时

//html
<input type="button" value="获取验证码" class="sentBtn">

//css
/* 发送按钮禁止样式 */
    .sentBtn.disabled {
	background-color:#CCC !important;
	cursor:not-allowed !important;
}
/* 发送按钮样式 */
	.sentBtn {
	min-width:100px;
	padding:5px;
	border:none;
	color:#FFF;
	background-color:#83EBF0;
	border-radius:4px;
	cursor:pointer;
}

$('.sentBtn').click(function() {
    $(this).addClass("disabled"); //点击获取验证码后，禁用该按钮，开始倒计时
    var time = 60; //倒计时时间，自定义
    var $this = $(this); //备份，定时器是异步的，此this非彼this
    var timer = setInterval(function() {
        time--; //开始倒计时
        if (time == 0) { //当倒计时为0秒时，关闭定时器，更改按钮显示文本并设置为可以点击
            clearInterval(timer);
            $this.val('获取验证码');
            $this.removeClass("disabled");
            return;
        }
        $this.val('还剩' + time + "秒"); //显示剩余秒数
    }, 1000); //定时器一秒走一次，每次减一，就是倒计时了
});