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

<!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. libcrypto.so.10内容丢失导致sshd无法运行

    今天启动虚拟机,ssh服务起不来,提示如下: Starting sshd: /usr/sbin/sshd: error while loading shared libraries: libcrypt ...

  2. SQLServer数据库执行较大的脚本

    当我们需要在SQLServer数据库里面执行一个比较大的文件(比如2GB)时,会发现数据库根本无法打开该脚本文件,原因是因为查询分析器只能执行100M以内的文件,所以脚本过大就会造成内存溢出.下面是具 ...

  3. package.json作用

    这个文档的内容是你必须要知道的,它必须是JSON文本格式.每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元 ...

  4. Python 爬虫练手项目—酒店信息爬取

    from bs4 import BeautifulSoup import requests import time import re url = 'http://search.qyer.com/ho ...

  5. Linux 下LNMP环境搭建_【all】

    LNMP = Linux + Nginx + Mysql + PHP 1.0 Linux环境搭建 Linux 系统安装[Redhat] 1.1. FastCGI介绍 1.什么是CGI(common g ...

  6. OSG3.0.1的编译

    在OSG-中国有很多关于OSG的资料,包括OSG的编译和教程. 要编译OSG首先需要准备的包: 1,OSG3.0.1源代码: 2,CMAKE: 3,OSG用到的第三方库: 4,OSG Data:OSG ...

  7. java.lang.UnsatisfiedLinkError: /usr/openv/java/jre/lib/amd64/libawt_xawt.so: libXtst.so.6: cannot open shared object file: No such file or directory

    解决办法: 在radhat 或者centos系统中运行一下命令即可:yum install libXext.x86_64yum install libXrender.x86_64yum install ...

  8. December 28th 2016 Week 53rd Wednesday

    Knowledge is a treasure, but practice is the key to it. 知识是珍宝,而实践是获取她的钥匙. I know a lot, but what I r ...

  9. [日常]蒟蒻的高一生活 Week 1~3

    博主在三周前成功晋级为高中生OwO终于不再是假的HZOIer感受一波HZ的真正生活...(然而实际上级部不少监督一直没启动23333) (然而三周过去好多事情都忘了QAQ瞎写好了(逃)) Week 1 ...

  10. Eclipse中的BuildPath详解【转载】

    什么是Build Path? Build Path是指定Java工程所包含的资源属性集合. 在一个成熟的Java工程中,不仅仅有自己编写的源代码,还需要引用系统运行库(JRE).第三方的功能扩展库.工 ...