测试发送验证码倒计时

最新推荐文章于 2021-11-26 13:36:05 发布

江湖行骗老中医lm

最新推荐文章于 2021-11-26 13:36:05 发布

阅读量142

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_20757489/article/details/89024379

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试发送验证码倒计时</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #getverification {
            width: 100px;
            line-height: 28px;
            border-radius: 5px;
            font-size: 12px;
            font-family: "Microsoft YaHei";
            text-align: center;
            color: #fff;
            background-color: #29A6DD;
            cursor: pointer;
            margin-left: 46%;
            margin-top: 20%;
        }
    </style>
</head>
<body>
<button type="button" id="getverification">获取验证码</button>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script>
    $('#getverification').on('click',function(){
        var that = $(this);
        var time = 60;
        var timeStop = setInterval(function(){
            time--;
            if (time>0) {
                that.text('重新发送' + time +'s');
                that.attr('disabled','disabled');//禁止点击
            }else{
                time = 60;//当减到0时赋值为60
                that.text('获取验证码');
                clearInterval(timeStop);//清除定时器
                that.removeAttr('disabled');//移除属性，可点击
            }
        },1000)
    })
</script>
</body>
</html>

江湖行骗老中医lm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
测试发送验证码倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试发送验证码倒计时</title> <style> *{ padding:0; ma...
复制链接

扫一扫

专栏目录