JQ实现倒计时功能

使用JQ实现发送短信或阅读倒计时效果,结合bootstrap框架。直接上效果图:

image.png

代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>手机验证码 </title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
    <style>
 .box {
            width: 400px;
 margin: 20px auto 0;
 padding: 20px;
 background-color: #EEE;
 }

        .code-img {
            height: 36px;
 }
    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <form action="" method="post">
            <div class="form-group">
                <label>手机号</label>
                <input type="text" class="form-control" placeholder="请输入手机号" required="required"/>
            </div>
            <div class="form-group">
                <label>图形验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" class="form-control" placeholder="请输入图形验证码" required="required"/>
                    </div>
                    <div class="col-md-6 code">
                        <img src="img/code.jpg" alt="" class="code-img"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>短信验证码</label>
                <div class="row">
                    <div class="col-md-6">
                        <input type="text" class="form-control" placeholder="请输入短信验证码" required="required"/>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-success" id="sendButton">点击发送验证码</button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-success btn-group-justified" type="submit">提交</button>
                <br/>
                <button class="btn btn-info btn-group-justified" type="reset">重置</button>
            </div>
        </form>
    </div>
</div>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
 $("#sendButton").click(function () {
        //定义状态
 var status = true;
 //定义时间
 var time = 10;
 //弹层提示
 alert("发送成功");
 //添加属性
 $(this).attr("disabled", true);
 //判断
 if (status) {
            //更改描述性文字
 status = false;
 var timer = setInterval(() => {
                time--;
 $(this).html(time + ' 秒后再次发送');
 if (time === 0) {
                    clearInterval(timer);
 $(this).html("点击发送验证码").attr('disabled', false);
 status = true;
 }
            }, 1000)
        }
    });
</script>
</body>
</html>


喜欢就点个赞吧

发表评论

需要先登录,才能发表评论哦!登录

网友评论
暂无评论