1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9. #getCode {
  10.     width: 9rem;
  11.     height: 3rem;
  12.     line-height: 3rem;
  13.     font-size: 1.2rem;
  14.     background-color: #3a3a3a;
  15.     color: #fff;
  16.     border-radius: 0.8rem;
  17.     border: none;
  18.     text-align: center;
  19. }
  20.  
  21. #getCode[disabled] {
  22.     background-color: #B6B6B6;
  23. }
  24. </style>
  25.  
  26. <body>
  27.     <button id="getCode">获取验证码</button>
  28. </body>
  29. <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
  30. <script>
  31. $(function() {
  32.     //获取验证码
  33.     var getCode = document.getElementById('getCode');
  34.     var wait = 60;
  35.  
  36.     function time(btn) {
  37.         if (wait === 0) {
  38.             btn.removeAttribute("disabled");
  39.             btn.innerHTML = "获取验证码";
  40.             wait = 60;
  41.         } else {
  42.             btn.setAttribute("disabled", true);
  43.             btn.innerHTML = wait + "秒后重试";
  44.             wait--;
  45.             setTimeout(function() {
  46.                 time(btn);
  47.             }, 1000);
  48.         }
  49.     }
  50.     getCode.onclick = function() {
  51.         time(this);
  52.     };
  53. })
  54. </script>
  55.  
  56. </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. 注解【介绍、基本Annotation、元Anntation、自定义注解、注入基本信息、对象】

    什么是注解? 注解:Annotation-. 注解其实就是代码中的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相对应的处理. 为什么我们需要用到注解? 传统的方式,我们是通过配置文件(x ...

  2. quartz定时格式配置以及JS验证

    一个Cron-表达式是一个由六至七个字段组成由空格分隔的字符串,其中6个字段是必须的而一个是可选的,如下: ---------------------------------------------- ...

  3. showfm练习小项目总结

    Showfm 项目总结: 有一个主页面, 有一个service,启动和结束一般在主页面里面完成. OnCreate启动service OnDestroy关闭service EventBus 信息传递 ...

  4. git fatal: I don't handle protocol 'https'问题的解决

    问题重现 新建的仓库,再把本地的代码往上push的时候Git提示 $ fatal: I don't handle protocol 'https' 问题分析 Git是支持https的,这点毋庸置疑,所 ...

  5. 【DDD】领域驱动设计实践 —— UI层实现

    前面几篇blog主要介绍了DDD落地架构及业务建模战术,后续几篇blog会在此基础上,讲解具体的架构实现,通过完整代码demo的形式,更好地将DDD的落地方案呈现出来.本文是架构实现讲解的第一篇,主要 ...

  6. Codevs1380没有上司的舞会_KEY

    没有上司的舞会 1380 没有上司的舞会 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description Ural大学有N个职员,编号为1~N.他们有从属关系,也就是说他们的关系 ...

  7. 解决linux下部署科大讯飞时的版本过低问题

    在将项目部     署到阿里云服务器之后,需要将科大讯飞SDK下的libmsc64.so依赖库文件上传至/usr/java/jdk1.8.0_121/jre/lib/amd64路径下   在Windo ...

  8. http://codeforces.com/problemset/problem/545/D

    D. Queue time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  9. Centos 7.4 下初探Zabbix安装

    工作一波停一波起,感觉离开.net好久了. 最近工作中发现服务器监视都是用了zabbix,对于我这类不懂的狠狠弥补了一下知识. 无意发现zabbix带有api,就想开发个工具调用api来着.可是api ...

  10. 用MXNet实现mnist的生成对抗网络(GAN)

    用MXNet实现mnist的生成对抗网络(GAN) 生成式对抗网络(Generative Adversarial Network,简称GAN)由一个生成网络与一个判别网络组成.生成网络从潜在空间(la ...