<!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. SVM原理以及Tensorflow 实现SVM分类(附代码)

    1.1. SVM介绍 1.2. 工作原理 1.2.1. 几何间隔和函数间隔 1.2.2. 最大化间隔 - 1.2.2.0.0.1. \(L( {x}^*)\)对$ {x}^*$求导为0 - 1.2.2 ...

  2. Servlet第三篇【request和response简介、response的常见应用】

    response.request对象 Tomcat收到客户端的http请求,会针对每一次请求,分别创建一个代表请求的request对象.和代表响应的response对象 既然request对象代表ht ...

  3. springmvc04-文件上传-JSON数据

    文件上传部分: 1, 导入commons-fileupload-1.2.2.jar commons-io-2.4.jar 两个jar包. 2, 在主配置文件中,添加如下信息 <!-- 文件上传- ...

  4. 基于FPGA的腐蚀膨胀算法实现

    本篇文章我要写的是基于的腐蚀膨胀算法实现,腐蚀膨胀是形态学图像处理的基础,,腐蚀在二值图像的基础上做"收缩"或"细化"操作,膨胀在二值图像的基础上做" ...

  5. XtraGrid滚轮翻页

    滚轮翻页与传动的翻页更为方便,经过本人一番探讨与琢磨终于在XtraGrid的GridView中实现了鼠标滚轮翻页. 我新建了一个组件继承原本的GridControl,在组件中添加了一个ImageLis ...

  6. 开博近一年的感想 by 程序员小白

    /* 好吧,这里的写博客应该理解为更宏观的写文章. */   在去年的这个时候,我所知道的平台只有 CSDN 和博客园..然而 CSDN 的广告实在是不想吐槽了,选择博客园是一件非常自然的事情.要说开 ...

  7. 一个基于Asp.net MVC的博客类网站开源了！

    背景说明: 大学时毕业设计作品,一直闲置在硬盘了,倒想着不如开源出来,也许会对一些人有帮助呢,而且个人觉得这个网站做得还是不错了,毕竟是花了不少心思,希望对你有所帮助. github地址:https: ...

  8. EOutOfResources字符异常

    近日,用Delphi编程时,遇到一个莫名其妙的异常:EOutOfResources,这是一个可以重复再现的异常.开始以为是程序中创建的对象太多,导致占用了过多的资源,引起了这个异常.于是在代码中将许多 ...

  9. JSP入门 分页

            <div> <%      Integer pageNo = (Integer) request.getAttribute("pageNo");  ...

  10. hdu1356&hdu1944 博弈论的SG值（王道）

    S-NimProblem DescriptionArthur and his sister Caroll have been playing a game called Nim for some ti ...