js实现简单计时器

原创于 2017-01-27 15:37:45 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #js

php 同时被 2 个专栏收录

9 篇文章

订阅专栏

jquery

5 篇文章

订阅专栏

本文介绍了一种前端实现发送手机验证码后的倒计时功能的方法。通过使用JavaScript结合HTML来控制按钮的状态，包括禁用按钮、显示剩余时间以及重新启用按钮等功能。此功能对于涉及用户验证的网站和应用非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//手机号正确后可以点击发送验证码
    $(".js-getCode").click(function(){
        if( i == 2){
           //使用ajax把手机号发到后端,调用短信接口,前端同时开始计时
            //换成计时器,指针换成默认
            $(this).css("cursor", "default");
            t = 60;
            tid = setInterval(timeCount, 1000); 
        }
    });
    //计时器
    function timeCount(){
        $(".js-getCode").html("<span style='color:#B4B8BB'>获取验证码["+t+"]");
        t = t - 1;
        if(t == 0){
            clearInterval(tid);
            $(".js-getCode").text("重新发送");
            $(".js-getCode").css("cursor", "pointer");
        }
    }