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

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

一、效果

                                    
                                     

二、代码

(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秒倒计时,直接用

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

随机推荐

  1. .NET 获取类内成员的名称,以字符串形式显示

    需要做一个功能,显示类内的属性名和对应的值.比如有类 Public Class SupervisedParams     Public TestMode As string     Public Ti ...

  2. Mongodb的入门(4)mongodb3.6的索引

    Mongodb的索引: 在介绍索引之前,再强调一下nosql数据库和sql数据库的区别: sql数据库:结构化数据,定好了表格后,每一行的内容都是结构化的 mongo:文档数据,表下的数据都可以有自己 ...

  3. 【转】Linux配置NTP时间同步服务器

    分布式程序通常需要运行在一个统一的时间环境里. 转自:http://blog.csdn.net/mengfanzhundsc/article/details/62046562 安装NTP:yum in ...

  4. 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  5. 理解 Azure 平台中虚拟机的计算能力

    虚拟化平台至今已经发展了十多年的时间.其中 Hyper-V 技术现在也已经是第三代版本.用户对于虚拟化计算也越来越接受,这也有了公有云发展的基础.然而在很多时候,用户在使用基于 Hyper-V 的 A ...

  6. ubuntu下配置时间同步NTP

    1参考文献: 1.鸟哥的Linux私房菜:第十五章.时间服务器: NTP 服务器(强烈建议看完) 2.http://www.crsay.com/wiki/wiki.php/server/centos/ ...

  7. 超经典sql练习题,在teradata上实现

    题目来源:https://blog.csdn.net/flycat296/article/details/63681089 teradata实现: drop table student; create ...

  8. OpenResty 安装配置

    0. 说明 1. Windows 下安装 下载软件包 openresty-1.13.6.1-win32.zip ,解压即可食用. [开启] 直接运行 nginx.exe 在 Windows 的命令窗口 ...

  9. 读高性能JavaScript编程 第二章 让我知道了代码为什么要这样写

    代码为什么要这样写? function initUI(){ var doc = document, bd = doc.body, links = doc.getElementsByTagName_r( ...

  10. November 06th, 2017 Week 45th Monday

    The education of a man is never completed until he dies. 一个人的学习之路,到死才结束. Being a life-long learning ...