JQuery实现倒计时5s,获取验证码

zlting~

于 2019-07-16 11:20:41 发布

阅读量678

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签：前端倒计时 JQuery

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/96114568

JQuery 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用JQuery实现两种不同的倒计时功能：一是倒计时5秒，二是倒计时60秒以获取验证码的场景。

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

第一种: 倒计时5s

 <div onClick='print()'>
	<span id="time" class="fontSize14">打印药板</span>
 </div>

//按钮事件：打印
function print(){
   //...打印事件调用后执行
	after();
}

//自动刷新按钮上的时间
var i = 5;
function after(){
    if(i>0){
        $("#time").empty().append( i + 's' );
        i=i-1;
        setTimeout(function(){
            after();
        },1000);
    }else{
        $("#time").empty().append('打印药板');
        i = 5;
    }
}

第二种: 倒计时60s,获取验证码

<a class="tableText fr" href="#">获取验证码</a>

$(".tableText").click(function () {
    var time = 60;
    var timer = setInterval(function(){
        time--;
        $(".tableText").text("（"+time+"秒）重发");
        if(time==0){
            clearInterval(timer);
            $(".tableText").text("获取验证码");
        }
    },1000);
});