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

<!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. 常用到的简单命令 Sublime Git NPM WindowsCMD MacTerminal(Unix命令) Vim

    sublime 选择标签及其内容 ctrl+shift+a连续按两次 调出Package console: Mac: command + shift + p 安装插件: 1.调出 Package co ...

  2. vim常用快捷汇总

    移动光标的方法 h 或 向左箭头键(←) 光标向左移动一个字符 j 或 向下箭头键(↓) 光标向下移动一个字符 k 或 向上箭头键(↑) 光标向上移动一个字符 l 或 向右箭头键(→) 光标向右移动一 ...

  3. FileWriter与BufferedWriter的适用场景

    IO这块,各种Writer,Reader,让人眼晕 而在网上基本找不到在什么时候用哪个类,并且网上的IO demo 很多用法都是错的 在这简单的分析一下FileWriter与BufferedWrite ...

  4. asp.net mvc4 小问题

    最近在学习mvc4中间出现一些问题.留作记录.. 1.新建立的项目在vs2013中运行后会出现一个长轮询..这个叫browserLink 是vs2013中新加入的东西.至于更多解释.直接百度.. 关闭 ...

  5. ajax实现跨域提交

    因为现在一直用的mvc,所以就以mvc来说说ajax跨域提交. 首先说说跨域,简单说就是不同域名访问,比如在aaa.com访问bbb.com. 就拿招聘网站来说,分为两种用户,求职者和企业,求职者端是 ...

  6. Python学习---Django路由系统【all】

    Django URL (路由系统) Django URL (路由系统): URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映 ...

  7. Jquery 获取Checkbox值，prop 和 attr 函数区别

    总结: 版本 1.6 1.6 1.4 1.4 函数 勾选 取消勾选 勾选 取消勾选 attr('checked') checked undefined true false .prop('checke ...

  8. 低版本兼容使用Fragment (转）

    Fragment框架开发东西确实很方便,但是恼人的是从4.0才开始支持.以前的版本必须用兼容模式开发,本人在网上找了大量资料,终于找到些线索正常运行于2.1版本的安卓系统.现在浅说一下兼容版本使用Fr ...

  9. JavaScript的DOM_动态加载脚本和样式

    一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们 ...

  10. Voronoi图及matlab实现

    [题外话:想一想真是...美赛时我预测求爱尔兰的充电站位置分布,画Voronoi图,程序跑了一个小时...]   Voronoi图,又叫泰森多边形或Dirichlet图,它是由一组由连接两邻点直线的垂 ...