这是一款基于jquery实现的手机发送验证码倒计时效果代码，可实现实时显示秒数倒计时的功能，还可实现对手机号码格式验证的功能，是一款常用的网站注册发送手机验证码特效代码。

效果描述：
注册一个网站，当需要发送验证码到手机上的时候，我们经常碰到这样的效果：
首先检测手机是否符合1开头，11位数字的格式；
若不符合，则提示错误信息并返回false；
否则提交给后台，后台确定接收后返回一个值，发送按钮变为灰色并倒计时。

运行效果：

--------------------------------效果演示 源码下载--------------------------------

为大家分享的jQuery实现的手机发送验证码倒计时效果代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery手机发送验证码倒计时代码</title>
<link href="css/jb51.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="form">
 <div class="div-name">
 <label for="name">用户名</label><input type="text" id="name" class="infos" placeholder="请输入用户名" />
 </div>
 <div class="div-phone">
 <label for="phone">手机</label><input type="text" id="phone" class="infos" placeholder="请输入手机" />
 <a href="javascript:;" class="send1" onclick="sends.send();">发送验证码</a>
 </div>
 <div class="div-ranks">
 <label for="ranks">验证码</label><input type="text" id="ranks" class="infos" placeholder="请输入验证码" />
 </div>
 <div class="div-conform">
 <a href="javascript:;" class="conform" onclick="sends.conform();">提交</a>
 </div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var sends = {
 checked:1,
 send:function(){
  var numbers = /^1\d{10}$/;
  var val = $('#phone').val().replace(/\s+/g,""); //获取输入手机号码
  if($('.div-phone').find('span').length == 0 && $('.div-phone a').attr('class') == 'send1'){
  if(!numbers.test(val) || val.length ==0){
   $('.div-phone').append('<span class="error">手机格式错误</span>');
   return false;
  }
  }
  if(numbers.test(val)){
  var time = 30;
  $('.div-phone span').remove();
  function timeCountDown(){
   if(time==0){
   clearInterval(timer);
   $('.div-phone a').addClass('send1').removeClass('send0').html("发送验证码");
   sends.checked = 1;
   return true;
   }
   $('.div-phone a').html(time+"S后再次发送");
   time--;
   return false;
   sends.checked = 0;
  }
  $('.div-phone a').addClass('send0').removeClass('send1');
  timeCountDown();
  var timer = setInterval(timeCountDown,1000);
  }
 }
}
</script>
</body>
</html>

以上就是为大家分享的jquery实现的手机发送验证码倒计时效果代码，希望大家可以喜欢。

jQuery实现的手机发送验证码倒计时效果代码分享的更多相关文章

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

    <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type=&q ...

  2. js实现发送验证码倒计时效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

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

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

  5. react native中的聊天气泡以及timer封装成的发送验证码倒计时

    今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以 ...

  6. 腾讯云短信服务+Node.js给手机发送验证码

    最近公司需要些一个登陆验证和修改密码验证,需要用到验证码,我用Node.js写了一个给手机发验证码的代码,下面实现的功能有:生产验证码,(计时器)验证码失效时间,给手机发送短信. 首先看官方文档,在给 ...

  7. laravel框架手机发送验证码

    https://blog.csdn.net/sunny_lg/article/details/52471225 现在登录注册时 我们的验证方法 不在单一化  手机发送验证码 已经成为常态 让我们 一起 ...

  8. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  9. jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码

    原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...

随机推荐

  1. timedatectl — Control the system time and date

    timedatectl --help 的执行结果如下: timedatectl [OPTIONS...] COMMAND ... Query or change system time and dat ...

  2. 洛谷P1736 创意吃鱼法 dp

    正解:dp 解题报告: 早就想写dp的题目辣!我发现我的dp好差啊QAQ所以看到列表的小朋友写dp的题目就跟着他们的步伐做下题好辣QwQ 这题的话没有那——么难,大概说下趴QwQ 首先说下题意 前面一 ...

  3. AC自动机板子题/AC自动机学习笔记!

    想知道484每个萌新oier在最初知道AC自动机的时候都会理解为自动AC稽什么的,,,反正我记得我当初刚知道这个东西的时候,我以为是什么神仙东西,,,(好趴虽然确实是个对菜菜灵巧比较难理解的神仙知识点 ...

  4. api收录

    ip地址查询api http://ip.taobao.com/service/getIpInfo.php?ip= 如: http://ip.taobao.com/service/getIpInfo.p ...

  5. JavaScript类库汇总

    日期处理Moment.js    http://momentjs.cn/  http://momentjs.com/ nodejslinq,jslinq    http://jslinq.codepl ...

  6. Django Rest Framework(3)-----APIView与Viewsets

    REST framework提供了一个APIView类,它是Django的View类的子类. REST framework主要的几种view以及他们之间的关系: mixins 到目前为止,我们使用的创 ...

  7. VS2010/MFC编程入门之十八（对话框：字体对话框）

    鸡啄米在上一节为大家讲解了文件对话框的使用,本节则主要介绍字体对话框如何应用. 字体对话框的作用是用来选择字体.我们也经常能够见到.MFC使用CFontDialog类封装了字体对话框的所有操作.字体对 ...

  8. python openpyxl 封装Execl常用操作的方法

    封装Excel操作方法:先装openpyxl:pip install openpyxl==2.4.5(可以指定版本) 封装脚本:#encoding=utf-8 from openpyxl import ...

  9. 20145339顿珠达杰 《网络对抗技术》 逆向与Bof基础

    目的 通过一些方法,使能够运行本不该被运行的代码部分,或得到shell的使用: 将正常运行代码部分某处call后的目标地址,修改为另一部分我们希望执行.却本不应该执行的代码部分首地址(这需要我们有一定 ...

  10. Linux内核分析第五周 扒开系统调用的三层皮（下） （20135304 刘世鹏）

    作者:刘世鹏20135304  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.给MenuOS增加t ...