js实现60秒倒计时效果(使用了jQuery)

时间:2022-10-05 15:37:38

今天碰到要实现一个类似那种短信验证码60秒倒计时的需求,好久不写js,有点手生。把代码记录下,方便后续查阅。

这里我用了jQuey,毕竟写起来简洁点。下面直接看效果和代码。

一、效果

                                    js实现60秒倒计时效果(使用了jQuery)
                                     js实现60秒倒计时效果(使用了jQuery)

二、代码

(1)html

<input type="button" id="btn" value="免费获取验证码" onclick="daojishi(10,this)" />  
1
 
1
<input type="button" id="btn" value="免费获取验证码" onclick="daojishi(10,this)" />  
        注意:要引入JQuery

(2)js
<script type="text/javascript">
function daojishi(seconds,obj){
if (seconds > 1){
seconds--;
$(obj).val(seconds+"秒后可重新获取 ").attr("disabled", true);//禁用按钮
// 定时1秒调用一次
setTimeout(function(){
daojishi(seconds,obj);
},1000);
}else{
$(obj).val("免费获取验证码").attr("disabled", false);//启用按钮
}
}
</script>
 
1
<script type="text/javascript"> 
2
    function daojishi(seconds,obj){
3
        if (seconds > 1){
4
                seconds--;
5
                $(obj).val(seconds+"秒后可重新获取 ").attr("disabled", true);//禁用按钮
6
                // 定时1秒调用一次
7
                setTimeout(function(){
8
                    daojishi(seconds,obj);
9
                },1000);
10
            }else{
11
                $(obj).val("免费获取验证码").attr("disabled", false);//启用按钮
12
            }
13
    }
14
</script> 

js实现60秒倒计时效果(使用了jQuery)的更多相关文章

  1. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  2. uni验证码60秒倒计时

    其实要实现这个功能原理非常简单,就是setInterval+setTimeout+clearInterval结合使用,首先在data里定义一个变量second,初始值为60,然后在setInterva ...

  3. 点击按钮出现60秒倒计时js代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js jquery 按钮点击后 60秒之后才能点击 60秒倒计时

    var wait = 60; function time(o) { if (wait == 0) { $(o).attr("disabled", false); $(o).val( ...

  5. 获取验证码,60秒倒计时js

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...

  6. 点击按钮出现60秒倒计时,JS(按钮)

    <script type="text/javascript"> var countdown=60; function settime(val) { var e = $( ...

  7. jQuery实现发送短信验证码后60秒倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  8. button获取验证码60秒倒计时 直接用

    __block ; __block UIButton *verifybutton = _GetverificationBtn; verifybutton.enabled = NO; dispatch_ ...

  9. iOS-登录发送验证码时60秒倒计时&comma;直接用

    __block NSInteger timeout= ; //倒计时时间 KWeakSelf dispatch_queue_t queue = dispatch_get_global_queue(DI ...

随机推荐

  1. oracle服务起不来以及无法监听问题解决

    改问题是在搭建起一个很早之前的数据库的时候碰见的,虽然这个问题网上已经有很多相关的帖子,但因最近碰见多次这样的问题,特此简单记录: 1.最开始碰见的问题是:The listener supports ...

  2. 一些变态的PHP一句话后门收集

    这类后门让网站.服务器管理员很是头疼,经常要换着方法进行各种检测,而很多新出现的编写技术,用普通的检测方法是没法发现并处理的.今天我们细数一些有意思的PHP一句话木马. 利用404页面隐藏PHP小马 ...

  3. linux新内核的时钟机制代码

    http://blog.chinaunix.net/uid-22810130-id-384173.html 如果说cfs是linux的一个很有创意的机制的话,那么linux中另一个创意就是nohz,我 ...

  4. cf div2 237 D

    D. Minesweeper 1D time limit per test 2 seconds memory limit per test 512 megabytes input standard i ...

  5. CodeForces 558E&lpar;计数排序&plus;线段树优化)

    题意:一个长度为n的字符串(只包含26个小字母)有q次操作 对于每次操作 给一个区间 和k k为1把该区间的字符不降序排序 k为0把该区间的字符不升序排序 求q次操作后所得字符串 思路: 该题数据规模 ...

  6. 《Differential Equations with Boundary-Value Problems》-chaper2-一阶线性方程

    学习微分方程中,一个很常见的疑惑就是,我们所熟悉的非齐次微分方程的通解是对应齐次方程的通解加特解,但是更为重要的是,我们需要知道这句话是怎么得来的. 我们探讨一个未知问题的一般思路是将其不断的与已知已 ...

  7. 我的VSTO之路&lpar;三&rpar;:Word基本知识

    原文:我的VSTO之路(三):Word基本知识 在前一篇文章中,我初步介绍了如何如何开发一个VSTO程序,在本文中,我将进一步深入介绍Word的插件开发.Word是一个大家在日常工作中一直接触的文档工 ...

  8. jquery datatable 参数api

    jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量的演示和详细的文档进行说明 ...

  9. java 集合大家族

    在编写java程序中,我们最常用的除了八种基本数据类型,String对象外还有一个集合类,在我们的的程序中到处充斥着集合类的身影!java中集合大家族的成员实在是太丰富了,有常用的ArrayList. ...

  10. FrameBuffer系列 之 相关结构与结构体

    在linux中,fb设备驱动的源码主要在Fb.h (linux2.6.28\include\linux)和Fbmem.c(linux2.6.28\drivers\video)两个文件中,它们是fb设备 ...