<!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. ACM退役记&&回忆录

    ACM退役记 2017.9.19星期二,"九一八事变"八十六年后的第二天,永远记住这个日子,刚好是我报名ACM到现在,刚好满一年,而今天正是我注册杭州电子科技大学OJ的时间(就是这 ...

  2. 你必知必会的SQL面试题

    写在前面的话 本文参考原博<走向面试之数据库基础:一.你必知必会的SQL语句练习-Part 1>和<走向面试之数据库基础:一.你必知必会的SQL语句练习-Part 2>进行练习 ...

  3. mongodb 3.4 集群搭建升级版 五台集群

    最新版mongodb推荐使用yaml语法来做配置,另外一些旧的配置在最新版本中已经不在生效,所以我们在生产实际搭建mongodb集群的时候做了一些改进.如果大家不熟悉什么是分片.副本集.仲裁者的话请先 ...

  4. 利用Docker快速创建Nginx负载均衡节点

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.Self-Host Kestrel 1. 在vs2017中新建dotnet core2. ...

  5. PHP buffer的机制

    PHP的buffer是这样的: 输出的字符串 => PHP buffer => 等待输出 => web 服务器的缓冲区 => tcp 缓冲区 => 客户端.过程其实相当的 ...

  6. Java源码学习:HashMap实现原理

    AbstractMap HashMap继承制AbstractMap,很多通用的方法,比如size().isEmpty(),都已经在这里实现了.来看一个比较简单的方法,get方法: public V g ...

  7. 第5章 不要让线程成为脱缰的野马（Keeping your Threads on Leash） ---线程优先权（Thread priority）

    有没有过这样的经验?你坐在你的车子里,目的地还在好几公里之遥,而时间已经很晚了.你拼命想告诉那些挡住你去路的人们,今天这个约会对你是多么多么重要,能不能请他们统统--呃--滚到马路外?很不幸,道路系统 ...

  8. pdf点击超链接后返回：alt+ 向左 /向右

    pdf点击超链接后返回:alt+ 向左 /向右

  9. Eight hdu 1043 八数码问题 双搜

    Eight Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  10. bzoj1087 [SCOI2005][状压DP] 互不侵犯King （状压）

    在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行,包含两个数N,K ( 1 ...