jquery实现点击按钮变灰不可点击并开始倒计时10秒特效代码

徊忆羽菲

于 2019-10-09 11:31:09 发布

阅读量2.4k

点赞数 1

分类专栏： Javascript Jquery

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/102457607

版权

Javascript 同时被 2 个专栏收录

235 篇文章 6 订阅

订阅专栏

Jquery

192 篇文章 2 订阅

订阅专栏

jquery实现点击按钮变灰不可点击并开始倒计时10秒特效代码

实现代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">


</head>

<body>
<input type="button" value="获取验证码" id="searchButton" onclick="sendQipa250()"/><br/>
</body>

<script src="http://www.qipa250.com/static/vendors/jquery/dist/jquery.min.js"></script>


<script>
    var time = 10;

    function sendQipa250() {
        if (time == 0) {//重新获取验证码
            $("#searchButton").attr("disabled", false);
            $("#searchButton").val("点击发送验证码");
            time = 10;
            return false;//清除定时器
        } else {
            $("#searchButton").attr("disabled", true);
            $("#searchButton").val("重新发送(" + time + ")");
            time--;
        }
        //设置一个定时器
        setTimeout(function () {
            sendQipa250()
        }, 1000)
    }

</script>
</html>

代码解析

1、给按钮绑定一个点击事件

<input type="button" value="获取验证码" id="searchButton" onclick="sendQipa250()"/><br/>

2、设置一个初始的时间值，决定按钮过多少秒恢复

<script>
    var time = 10;

3、进行时间判断

若time==0则表示当前的按钮计时完毕,需要将按钮恢复,并且重新赋值,若!=0则表明当前正在计时，按钮禁用，并且时间time-1

 if (time == 0) {//重新获取验证码

4、设置一个计时器

依靠计时器来完成时间的倒数,这里setTimeout函数中包含了两个参数,一个是每隔多久时间后就调用的方法,另一个参数表示的是间隔时间

 setTimeout(function () {
            sendQipa250()
        }, 1000)

徊忆羽菲

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录