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

<!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. 使用ajax请求数据时的几种做法

    在进行前后端交互的时候,一般前端使用ajax向后端发送数据,后端根据发送的数据来返回数据,前端将这些数据接收并进行相应的处理 以下是在日常工作中总结的几点使用ajax传递数据时的情况: 1.在本页面( ...

  2. spring boot(4)-html和templates

     静态页面 spring boot项目只有src目录,没有webapp目录,会将静态访问(html/图片等)映射到其自动配置的静态目录,如下 /static /public /resources ...

  3. YII+DWZ三级城市联动挂件

    挂件PHP文件 class CountryCityCombox extends RXWidget { public $provinceId = 2; public $cityId = 3687; pu ...

  4. MySQL5.7.20编译安装

    1:官网下载source code源码安装文件 https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-boost-5.7.20.tar.gz 2:安装准备 ...

  5. 爬虫IP被禁的简单解决方法——切换UserAgent

    [转载]Python爬虫之UserAgent 用到的库 https://github.com/hellysmile/fake-useragent

  6. Python实例---利用正则实现计算器[参考版]

    利用正则进行运算规则的计算 版本一: # import re # # ss = '1 - 2 * ((60 - 30 + (-40/5) * (9 - 2 * 5 / 3 + 7 / 3 * 99 / ...

  7. Linux 下Wordpress博客搭建

    Wordpress # 下载安装文件 cd /usr/local/nginx/html/blog wget https://cn.wordpress.org/wordpress-4.8.1-zh_CN ...

  8. Apache Spark : Introduction

    看了一点<数据算法:Hadoop/Spark大数据处理技巧>,觉得有必要了解一下 Spark . 以上. Spark was introduced by Apache Software F ...

  9. 如何在windows下用IDA优雅调试ELF

    在windows下如何用IDA优雅调试ELF brief: 构建一个IDA-linux_server-docker镜像,优雅地IDA远程调试 使用传统虚拟机来运行一个linux程序就得跑一个完整的li ...

  10. URAL-1018 Binary Apple Tree---树形DP

    题目链接: https://cn.vjudge.net/problem/URAL-1018 题目大意: 给你一棵树,每条边有一个边权,求以1为根节点,q条边的子数(q+1个点),边权和至最大. 解题思 ...