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

<!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. PyCharm添加Selenium与Appium依赖

  2. base64编码以及url safe base64是怎么工作的?

    原文转自 http://www.yanshiba.com/archives/638 1: 为什么需要base64? ASCII码一共规定了128个字符的编码,这128个符号,范围在[0,127]之间. ...

  3. 关于Unity3d的Quaternion.LookRotation的学习

    首先,创建两个cube GameObject物件.Origin作为原点参考.Player是我们要实验的物件.如下图所示: 创建一个脚本Quat.cs,赋给Palyer cube.脚本如下: publi ...

  4. Nginx学习---企业级nginx环境搭建

    1.1. nginx安装环境 1.系统要求 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. 1-1 安装 GCC 源码安装nginx需要依赖gcc环境,需要 ...

  5. 沉淀再出发:dubbo的基本原理和应用实例

    沉淀再出发:dubbo的基本原理和应用实例 一.前言 阿里开发的dubbo作为服务治理的工具,在分布式开发中有着重要的意义,这里我们主要专注于dubbo的架构,基本原理以及在Windows下面开发出来 ...

  6. 移动App中常见的Web漏洞

    智能手机的存在让网民的生活从PC端开始往移动端转向,现在网民的日常生活需求基本上一部手机就能解决.外卖,办公,社交,银行转账等等都能通过移动端App实现.那么随之也带来了很多信息安全问题,大量的用户信 ...

  7. python中的BaseManager通信（一）文件三分

    可以在windows下单机运行 主部分(提供服务器) #mainfirst.py from multiprocessing.managers import BaseManager import Que ...

  8. 编程算法 - 数字在排序数组中出现的次数 代码(C)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012515223/article/details/36869869 数字在排序数组中出现的次数 代 ...

  9. 日常踩坑——rand()总是出现重复数据

    写了一个生成随机数组的函数,然后跑出来,结果总是…… 然后,很奇怪的是一步一步调试,它就没问题了,WTF??? 问题出在:重复写了srand(time(NULL)),只保留一个就好了. int* ge ...

  10. HTTPS科普扫盲

    为什么需要HTTPS HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...