前端开发中经常用到的发送按钮倒计时，每次都是重写，挺麻烦的，记录一下，以后直接来复制代码

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">

        <title>60s倒计时</title>

        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    </head>

    <body>

        <input type="button" value="邮箱验证码" onclick="sendVerificationCode(this)" />

        <script type="text/javascript">

            //发送验证码按钮的60s倒计时

            var countdown = 60;

            function sendVerificationCode(obj) {

                if(countdown == 0) {

                    obj.removeAttribute("disabled");

                    obj.value = "重新获取";

                    countdown = 60;

                    return;

                } else {

                    obj.setAttribute("disabled", true);

                    obj.value = "重新(" + countdown + ")";

                    countdown--;

                }

                setTimeout(function() {

                    sendVerificationCode(obj)

                }, 1000)

            }

        </script>

    </body>

</html>

jquery 60s倒计时的更多相关文章

  1. js实现60s倒计时效果

    适用于获取验证码等其他场景,下面代码直接粘贴句可以使用 // 60s获取验证码的js与html var timer = null; var count = 60; $('.box>button' ...

  2. React 60S倒计时

    React 60S倒计时 1.设置状态: 2.函数主体: 3.应用: 4..效果图:

  3. 6.短信验证码60s倒计时

    短信验证码60s倒计时 html: <input type="button"  class="btn btn-primary" value="免 ...

  4. jQuery实现倒计时效果-杨秀徐

    本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...

  5. React实战之60s倒计时按钮（发送短信验证按钮）

    React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormI ...

  6. jQuery自适应倒计时插件

    jQuery自适应倒计时插件 在线演示本地下载

  7. jQuery实现倒计时重新发送短信验证码功能示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. jquery.countdown 倒计时插件的学习

    1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

  9. jquery实现倒计时

    <html> <head> <meta charset="utf-8"/> <title>jquery实现倒计时</title ...

随机推荐

  1. select 时进行update的操作，在高并发下引起死锁

    场景:当用户查看帖子详情时,把帖子的阅读量:ReadCount+1 select title,content,readcount from post where id='xxxx'   --根据主键查 ...

  2. Windows Azure系列公开课 - 第二课：为什么选择Windows Azure（下）

    Windows Azure中有什么? |基础结构 Windows Azure能够根据您企业的需求提供最适合的基础结构,并且在业务发展或精简时能够根据变化的需求及时的做出改变.您可以将Windows A ...

  3. VS2013个版本密钥(亲测可用)

    Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...

  4. Python学习---抽屉框架分析[点赞功能分析]

    实际上就是多了一个隐藏的span标签,内容是+1,配合setInterval实现的动态效果 settings.py INSTALLED_APPS = [ ... 'app01', # 注册app ] ...

  5. linux 三大利器 grep sed awk sed

    sed主要内容和原理介绍 sed 流处理编辑器 sed一次处理一行内容,读入一行处理一行 sed不改变文件内容(除非重定向) sed 命令行格式 $ sed [options] 'command' f ...

  6. 【心得体会】我考完MOS我明白了…

    [心得体会]我考完MOS我明白了… 原创 2017-11-10 MSP-李桑榆 MSPrecious成长荟 MOS备考 这篇文章写给还没有考或者准备考MOS的同学 网上有很多介绍MOS考试的 http ...

  7. winform中webBrowser模拟网页操作中遇到的问题

    我们通过网页上传一些特殊数据的时候,由于必填项众多,数量量大的时候,会发现工作相当繁琐,前段时间做了一个winform内嵌webBrowser模拟网页上传文档的小工具,发现了许多问题,总结一下: 先说 ...

  8. 新增检查sql脚本是否符合ANSI编码格式

    '******************************************************************* '作用:transfer转换文件编码格式 '参数含义:inco ...

  9. Samba文件共享服务器配置

    Samba起源: 早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序:NFS ...

  10. [EffectiveC++]item15：Provide access to raw resources in resource-managing class

    在资源管理类中提供对原始资源的访问