JS中setInterval()和clearInterval()定时器使用详解及获取验证码倒计时实例

最新推荐文章于 2023-04-14 16:01:53 发布

置顶阿尔法小师妹

最新推荐文章于 2023-04-14 16:01:53 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： setInterval() clearInterval()

本文链接： https://blog.csdn.net/weixin_41926301/article/details/100083918

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.使用详解

setInterval()与clearInterval()是直属于windows对象的js函数。

setInterval()以间隔指定的毫秒数不停的执行指定的代码。使用方法：setInterval(code，millisec)，两个参数都是必须的，第一个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔，以毫秒计。

clearInterval()用于停止 setInterval() 方法执行的函数代码。clearInterval(id_of_setinterval)，参数是必须的，为setInterval返回的ID值

2.获取验证码倒计时源码

获取验证码前端采用ACE框架，输入手机号，获取验证码，输入手机获取的验证码后登录。

源码如下：

<html lang="en">
<head>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="assets/css/ace.min.css"/>
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>
</head>

<body class="login-layout">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="space-6"></div>
                    <div id="signup-box" class="signup-box widget-box no-border">
                        <div class="widget-body">
                            <div class="widget-main">
                                <h4 class="header green lighter bigger">
                                    <i class="icon-group blue"></i>
                                    登录
                                </h4>

                                <div class="space-6"></div>
                                <p> 请输入登录信息: </p>

                                <form>
                                    <fieldset>
                                        <label class="block clearfix">
                                            <span class="block input-icon input-icon-right">
                                                <input type="text" class="form-control" placeholder="手机号" id="phone"/>
                                                <i class="icon-phone"></i>
                                            </span>
                                        </label>
                                        <div class="space-10"></div>

                                        <label class="block clearfix">
                                            <span class="block input-icon input-icon-right">
                                                <input type="text" class="form-control" placeholder="验证码" id="verifyCode"/>
                                                <i class="icon-comment"></i>
                                            </span>
                                        </label>
                                        <div class="space-10"></div>
                                        <div class="clearfix">
                                            <button type="button" class="width-100 pull-left btn btn-sm btn-success" id="obtainVerifyCode">
                                                获取验证码
                                            </button>
                                        </div>

                                        <div class="space-10"></div>

                                        <div class="clearfix">
                                            <button type="button" class="width-100 pull-right btn btn-sm btn-primary" id="login" disabled="disabled">
                                                登录
                                                <i class="icon-arrow-right icon-on-right"></i>
                                            </button>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div><!-- /widget-body -->
                    </div><!-- /signup-box -->
                </div><!-- /position-relative -->
            </div>
        </div><!-- /.col -->
    </div><!-- /.row -->
</div>
</div><!-- /.main-container -->
<script>
    jQuery(function () {
        $("#obtainVerifyCode").bind("click", function () {
            var limitTime = 60;
            var phone = $("#phone").val();
            if (!phone) {
                layer.alert("请输入手机号");
                return;
            }
            var setIntervalId = null;
            // 每隔1000ms执行一次定时器
            setIntervalId = setInterval(function () {
                if (limitTime == 0) {
                    //60s倒计时结束后清除计时器
                    clearInterval(setIntervalId);
                    $("#obtainVerifyCode").html("获取验证码");
                } else {
                    limitTime--;
                    $("#obtainVerifyCode").html(limitTime + "秒后可以重新获取验证码");
                }

            }, 1000);
            //获取验证码ajax
            //获取到验证码后登录按钮可以点击
            $('#login').removeAttr("disabled");
        })


        $("#login").bind("click", function () {
            var phone = $("#phone").val();
            if (!phone) {
                layer.alert("请输入手机号");
                return;
            }
            var verifyCode = $("#verifyCode").val();
            if (!verifyCode) {
                layer.alert("请输入验证码");
                return;
            }
            //登录ajax
        })
    })


</script>

</body>
</html>

3.获取验证码倒计时页面效果

阿尔法小师妹

关注关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS中setInterval()和clearInterval()定时器使用详解及获取验证码倒计时实例

1.使用详解 setInterval()与clearInterval()是直属于windows对象的js函数。 setInterval()以间隔指定的毫秒数不停的执行指定的代码。使用方法：setInterval(code，millisec)，两个参数都是必须的，第一个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔，以毫秒计。cle...
复制链接

扫一扫