这是一款基于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. MVC项目，bootstrap升级后index.d.ts编译出错

    安装最新的Typescript组件 下载链接 https://www.microsoft.com/en-us/download/details.aspx?id=48593

  2. C++ Design Pattern: What is a Design Pattern?

    Q: What is a Design Pattern? A: Design Patterns represent solutions to problems what arise when deve ...

  3. Flask知识总汇

    Flask基础 Flask基础使用与配置 Flask路由系统与模板系统 Flask视图函数 Flask请求与响应 Flask的session操作 Flask中间件 Flask连接数据库 Flask使用 ...

  4. Android(十六 ) android 与蓝牙串口通讯

    1.得到蓝牙适配器 BluetoothAdapter mBluetoothAdapter = BluetoothAdapter.getDefaultAdapter(); 2.打开蓝牙 if (!mBl ...

  5. Worst Performing Queries

    WITH TMP AS ( SELECT TOP 100 CAST(SUM(s.total_elapsed_time) / 1000000.0 AS DECIMAL(10, 2)) AS [Total ...

  6. docker——Etcd高可用键值对数据库

    一.简介 Etcd按照官方介绍: Etcd is a distributed, consistent key-value store for shared configuration and serv ...

  7. jvm之gc日志

    ava GC日志可以通过 +PrintGCDetails开启 以ParallelGC为例 YoungGC日志解释如下 FullGC:

  8. SAMBA服务器的安装和配置实践

    实验需求:1) 使用RPM包安装samba服务 2) 实现匿名访问,验证可以读写文件.目录 3) 实现指定用户的访问 4) 实现指定用户的访问,并为用户赋予不同的权限 启动LINUX系统,进行SAMB ...

  9. 31Sql数据库的连接

    Qt 提供了 QtSql 模块来提供平台独立的基于 SQL 的数据库操作.这里我们所说的“平台独立”,既包括操作系统平台,有包括各个数据库平台.另外,我们强调了“基于 SQL”,因为 NoSQL 数据 ...

  10. Uva11374 Dijkstra

    机场快线是市民从市内去机场的首选交通工具.机场快线分为经济线和商业线两种,线路.速度和价格都不同,你有一张商业线车票,可以坐一站商业线,而其他时候,只能乘坐经济线.假设换乘时间忽略不计,你的任务是找一 ...