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

<!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. jquery 之 $().each和$.each()

    一.选择器+遍历(dom操作)分为两种: 第一种: $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); <!DOCTYPE ht ...

  2. return, break and continue

    最近学习多线程看到了一个描述不太准确的地方,让我对return break continue个语句的不同开始详细了解了一番,之前只是知道怎么使用,不是很深入研究,基本遇到了跳出就用return来解决全 ...

  3. spring boot(6)-JdbcTemplate访问数据库

     pom.xml 添加jdbc模块和mysql依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...

  4. 如何解决MSSQL中文数据乱码问题

    今天遇到了在数据库中直接写SQL语句,语句中包含中文,但是数据库的表里是包含“?” 的乱码. 我程序代码中,调试时得到的SQL不是乱码,在控制台中也不是乱码.但是在数据库中却出现了乱码. 当用MSSQ ...

  5. linux系统服务器可能被攻击的几种攻击方式

    linux系统随着Linux企业应用的扩展,有大量的网络服务器使用Linux操作系统.Linux服务器的安全性能受到越来越多的关注,这里根据Linux服务器受到攻击的深度以级别形式列出,并提出不同的解 ...

  6. Ubuntu下Visual Studio Code的配置

    最近在Ubuntu系统里用Visual Studio Code编写vue代码时,在build的时候老是报错,后来发现原来Visual Studio Code里默认Tab是4个空格,而vue代码要求ta ...

  7. 《Python指南》学习笔记 一

    更新时间:2018-06-14 <Python指南>原文在这里.本篇笔记主要是划重点. Python 3.6.3 1.简单入门 1.1 编码 默认情况下,Python 源文件是 UTF-8 ...

  8. Linxu下 expect的实用实例_1

    案例 例1:从本机自动登录到远程机器192.168.1.200(端口是22,密码是:PASSWORD)登录到远程机器后做以下几个操作:1)useradd wangshibo2)mkdir /opt/t ...

  9. JAXB实现java对象与xml之间转换

    JAXB简介: 1.JAXB能够使用Jackson对JAXB注解的支持实现(jackson-module-jaxb-annotations),既方便生成XML,也方便生成JSON,这样一来可以更好的标 ...

  10. C++通过Callback向C#传递数据

    现在比较流行C#与C++融合:C#做GUI,开发效率高,C++做运算,运行效率高,二者兼得. 但是C++与C#必然存在数据交互,C#与C++dll的数据交互从来都是一个让人头疼的问题. 从调用方式看也 ...