<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

#getCode {

    width: 9rem;

    height: 3rem;

    line-height: 3rem;

    font-size: 1.2rem;

    background-color: #3a3a3a;

    color: #fff;

    border-radius: 0.8rem;

    border: none;

    text-align: center;

}

#getCode[disabled] {

    background-color: #B6B6B6;

}

</style>

<body>

    <button id="getCode">获取验证码</button>

</body>

<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>

<script>

$(function() {

    //获取验证码

    var getCode = document.getElementById('getCode');

    var wait = 60;

    function time(btn) {

        if (wait === 0) {

            btn.removeAttribute("disabled");

            btn.innerHTML = "获取验证码";

            wait = 60;

        } else {

            btn.setAttribute("disabled", true);

            btn.innerHTML = wait + "秒后重试";

            wait--;

            setTimeout(function() {

                time(btn);

            }, 1000);

        }

    }

    getCode.onclick = function() {

        time(this);

    };

})

</script>

</html>

js 短信倒计时60s的更多相关文章

  1. 6.短信验证码60s倒计时

    短信验证码60s倒计时 html: <input type="button"  class="btn btn-primary" value="免 ...

  2. js 发送短信倒计时、秒杀倒计时实现代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. js模拟支付宝发送短信验证码&&&&短信倒计时

    html <div class="pwdContent"> <div class="pwdBox"></div> <d ...

  4. Vue2.0进阶组件 短信倒计时组件

    原本我想隔个几天再发文章,刚好今天项目上线,环境有问题,导致只有干等,刚好要为公司打造一套属于公司自己的一系列功能组件,这个使命就交给我了,大家也一直叫我来点干货,说实话我只是一个湿货,肚子里干一点就 ...

  5. js短信验证码

    短信验证码,无注释,url顺便写的错的,所以会报错 <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  6. js 短信验证码 计时器

    $(function(){ getMsg(); //页面加载完成之后执行 }) function getMsg(){ //注册按钮的点击事件 $("#smsBtn").on(&qu ...

  7. js 发送短信验证码倒计时

    html <input type="button" id="btn" value="免费获取验证码" onclick="se ...

  8. jQ效果：jQuery之插件开发短信发送倒计时功能

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: < ...

  9. ThinkPHP3.2.3框架下接入阿里云短信服务接口实现：注册登录

    首先介绍下短信注册登录流程: 注册页面点击获取手机号验证码按钮,用jquery的click事件POST或GET方法把手机号发送到后台控制器: 后台控制器创建函数,收到手机号后生成随机码,例如:6位的随 ...

随机推荐

  1. Android 消息机制 （Handler、Message、Looper）

    综合:http://blog.csdn.net/dadoneo/article/details/7667726 与 http://android.tgbus.com/Android/androidne ...

  2. 【Conclusion】MySQL使用

    MySQL使用 因为数据库实验用到了MySQL,这里对现在已经涉及到的MySQL部分操作做一个简单的小结. 1.安装MySQL 上MySQL的官网下载对应自己OS平台的MySQL安装文件,有在线安装和 ...

  3. 【个人笔记】《知了堂》mysql表连接

    为什么使用表连接 什么是表连接? 如果数据来自多个表,那么可以采用链接查询的方式来实现.因此表连接就是多个表连接合在一起实现查询效果 表连接的原理 表连接采用的是笛卡尔乘积,称之为横向连接. 笛卡尔乘 ...

  4. Java虚拟中内存分块

    Java虚拟机JVM(Java Virtual Machine)中内存分块 JAVA中通常分为5个区域虚拟机栈.堆.方法区.程序计数器.本地方法区.我们一般讲的是Java虚拟机管理的四个区域虚拟机栈. ...

  5. Ubuntu16.04 Using Note

    I meet lots of problems when i installed and use ubuntu 16.04.below is my using note: (my operating ...

  6. Ngnix技术研究系列1-通过应用场景看Nginx的反向代理

    随着我们业务规模的不断增长,整个系统规模由两年前的几十台服务器,井喷到现在2个数据中心,接近400台服务器,上百个WebApi站点,上百个域名. 这么多的WebApi站点这么多的域名,管理和维护成本很 ...

  7. cannot be cast to javax.servlet.Servlet

    在第一次开发Maven项目时,maven环境和仓库以及eclipse都和讲师讲解的一样,可是却遇到下面这个问题: java.lang.ClassCastException: servlet.UserS ...

  8. Struts 关联DTD 文件

    Struts 的xml 文件在Eclipse 中  默认是不会有提示的. 但是我们可以关联DTD 文件, 这样子就可以出现如下的struts   提示了 1. 首先得先确保自己有Struts2 的Sr ...

  9. Java历程-初学篇 Day03扫描仪与类型转换

    一,扫描仪 步骤1,使用扫描仪方法 步骤2,导个包 步骤三,使用 注意事项:严格区分大小写 二,类型转换 1,自动类型转换 当将一个数值范围小的类型赋给一个数值范围大的数值型变量,java在编译过程中 ...

  10. IIS7中JS、CSS、Image无法显示和加载解决方案

    前两天把机器从Windows7升级到Windows10,IIS也跟着升级了,在获取项目搭载IIS上发现原有的页面中所有的JS.CSS.Image都无法访问,提示500错误,起初以为是IIS没有装好 重 ...