getVarify.js


// 验证码计时——第一种
window.onload = function () {
var send = document.getElementById('send'), //按钮ID
times = 10, // 别忘了改这里
timer = null;
send.onclick = function () {
// 计时开始
send.disabled = true;
timer = setInterval(function () {
times--;
if (times <= 0) {
send.value = '获取验证码';
clearInterval(timer);
times = 5; // 别忘了改这里
send.disabled = false;
} else {
send.value = times + '秒后重试'
send.disabled = true;
} console.log(times)
}, 1000);
// 发送请求获取验证码
console.log("sending...")
}
}// 验证码计时——第二种
// 参数:倒计时秒数, 按钮jquery对象, 倒计时结束时显示的文字
// 可以放到短信发送完毕后的回调函数里
// switchMSG(60, $("#get-verify"), '获取验证码')
function switchMSG(times, ele, txt) {
ele.prop('disabled', true)
var idT = setInterval(function() {
if(times < 1) {
ele.html(txt)
ele.prop('disabled', false)
clearInterval(idT)
} else {
ele.html(times+'s')
times-- }
}, 1000)
}

验证码倒计时js的更多相关文章

  1. 手机验证 发送验证码倒计时js

    html: <input name="Tel" class="weui-input" type="tel" placeholder=& ...

  2. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  3. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  4. js,JQ获取短信验证码倒计时

    按钮 <a href="javasript:void(0);"onclick="settime(this);">获取手机验证码</a> ...

  5. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  6. js之验证码倒计时功能

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  7. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

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

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

  9. jquery倒计时按钮常用于验证码倒计时

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

随机推荐

  1. E. Present for Vitalik the Philatelist 反演+容斥

    题意:给n个数\(a_i\),求选一个数x和一个集合S不重合,gcd(S)!=1,gcd(S,x)==1的方案数. 题解:\(ans=\sum_{i=2}^nf_ig_i\),\(f_i\)是数组中和 ...

  2. JavaScrip中的循环语句

    循环语句 循环语句,也是流程控制语句中不可或缺的一种结构.在 JavaScrip中实现循环的方式有好几个一个来看 1.为什么需要循环 在具体介绍 Javascript中的循环之前,首先我们来明确一个问 ...

  3. memcache课程---2、php如何操作memcache

    memcache课程---2.php如何操作memcache 一.总结 一句话总结: windows下装好memcache.exe,装好memcache的php扩展之后,然后使用memcache函数库 ...

  4. kubeadm安装Kubernetes 1.15 实践

    原地址参考github 一.环境准备(在全部设备上进行) 3 台 centos7.5 服务器,网络使用 Calico. IP地址 节点角色 CPU 内存 Hostname 10.0.1.45 mast ...

  5. Java(8)中List的遍历方式总结

    本篇文章主要讲述了List这一集合类型在Java,包括Java8中的遍历方式,不包括其他的过滤,筛选等操作,这些操作将会在以后的文章中得到提现,由List可以类推到Set等类似集合的遍历方式. pub ...

  6. Struts2OGNL

    OGNL: 什么是OGNL  Object Graph Navigation Language 开源项目,取代页面中Java脚本,简化数据访问 和EL同属于表达式语言,但功能更为强大  OGNL在St ...

  7. 2019-8-31-C#-已知点和向量,求距离的点

    title author date CreateTime categories C# 已知点和向量,求距离的点 lindexi 2019-08-31 16:55:58 +0800 2018-05-08 ...

  8. 如何做系列(4)-微博URL短网址生成算法原理(java版、php版实现实例)

    短网址(Short URL),顾名思义就是在形式上比较短的网址.通常用的是asp或者php转向,在Web 2.0的今天,不得不说,这是一个潮流.目前已经有许多类似服务,借助短网址您可以用简短的网址替代 ...

  9. C语言内存布局简记待补充

    C语言存储类型总结内存操作函数总结 用于自己学习和记录 1. void *memset(void *s, int c, size_t n); #include <string.h> 功能: ...

  10. JavaScript数据可视化编程书籍上面的例子(flotr2)

    先看demo再看例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...