<!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. linux(3)磁盘与文件系统管理/查看硬盘、内存空间/文件系统的操作/ 文件的压缩和打包

    一.磁盘与文件系统管理 1.分区与文件系统分区:记录每一个分区的开始柱面和结束柱面主引导区(master boot recorder):记录分区的数据,记录硬盘里所有的分区信息分区划分好后,要将分区格 ...

  2. Unity GameObject Class

    GameObject  Note : gameObject 指的是当前挂着的对象. class in UnityEngine / Inherits from:Object     Descriptio ...

  3. Excel开发之旅

    开发环境:Microsoft Visual Studio 2015,Office 2013 开发语言:C# 1.创建工程:文件à新建à项目,选择office 外接程序àExcel 2013和2016 ...

  4. oracle pl/sql 分页

    一.无返回值的存储过程 古人云:欲速则不达,为了让大家伙比较容易接受分页过程编写,我还是从简单到复杂,循序渐进的给大家讲解.首先是掌握最简单的存储过程,无返回值的存储过程. 案例:现有一张表book, ...

  5. oracle pl/sql 存储过程

    存储过程用于执行特定的操作,当建立存储过程时,既可以指定输入参数(in),也可以指定输出参数(out),通过在过程中使用输入参数,可以将数据传递到执行部分:通过使用输出参数,可以将执行部分的数据传递到 ...

  6. 使用百度ueditor的插件使得代码高亮显示

    一.在show.html模板中,引入ueditor的插件,并调用 <link rel="stylesheet" href="__ROOT__/Data/uedito ...

  7. mybatis错误——java.io.IOException: Could not find resource com/xxx/xxxMapper.xml

    在学习Mybatis的时候,参考网上的教程进行简单demo的搭建,配置的没有问题,然后出现了下面的错误! Exception in thread "main" java.lang. ...

  8. FPGA与数字信号处理

    过去十几年,通信与多媒体技术的快速发展极大地扩展了数字信号处理(DSP)的应用范围.眼下正在发生的是,以更高的速度和更低的成本实现越来越复杂的算法,这是针对高级信息服更高带宽以及增强的多媒体处理能力等 ...

  9. 执行manage.py syncdb提示Unknown command: 'syncdb'

    1. 实验环境 ubuntu14.4 + django1.9.7 2. 问题描述 在配置完数据库mysite/settings.py后,通常需要运行 python manage.py syncdb 为 ...

  10. Pycharm安装、设置、优化

    一.版本选择 建议安装5.0版本,因为好注册,这个你懂得. 下载地址: https://confluence.jetbrains.com/display/PYH/Previous+PyCharm+Re ...