这是一款基于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. mysql 取当前日期对应的周一或周日

    select subdate(curdate(),date_format(curdate(),'%w')-1)//获取当前日期在本周的周一 select subdate(curdate(),date_ ...

  2. 第一课：初识Hadoop

    Hadoop核心组件之分布式文件系统HDFS: 特点:扩充性,容错性,海量数据存储. 在HDFS中每次上传文件,都会将文件切分成指定大小的数据块(默认128m)并以多副本的存储在多个机器上. 数据切分 ...

  3. 204-React DOM 元素

    一.概述 为了提高性能和跨浏览器兼容性,React实现了一个独立于浏览器的DOM系统. 在React中,所有DOM属性和属性(包括事件处理程序)都应该是camelCased的.例如,HTML属性tab ...

  4. js-jquery-SweetAlert2【二】配置与方法

    一.配置 Argument Default value   Description title null 模态对话框的标题.它可以在参数对象的title参数中设置,也可以在swal()方法的第一个参数 ...

  5. Linux(CentOS)系统下搭建svn服务器

    由于GitHub的私有项目需要收费,gitlab对服务器的要求必须是4GB内存以上.对于一些个人的小型项目,想要免费的版本控制工具来管理自己的代码,又不想代码公开,无疑SVN是比较好的选择.windo ...

  6. leetcode 数据库题解

    184. Department Highest Salary 题意: The Employee table holds all employees. Every employee has an Id, ...

  7. swoole gets

    控制器调用: function gets() { $model = Model('ap_pic'); $model->select = ' id, size_type '; $gets['pag ...

  8. OAuth 白话简明教程 5.其他模式

    转自:http://www.cftea.com/c/2016/11/6706.asp OAuth 白话简明教程 1.简述 OAuth 白话简明教程 2.授权码模式(Authorization Code ...

  9. 系统管理命令之id

    当我们想知道某个用户的UID和GID时id命令是非常有用的.一些程序可能需要UID/GID来运行.id使我们更加容易地找出用户的UID以GID而不必在/etc/group文件中搜寻. 1.获取指定用户 ...

  10. Bootstrap fileinput v1.0（ssm版）

    前言bootstrap fileinput是一个很好的文件上传插件.但是官方不出api,这就尴尬了.百度一下,每个人写法都不相同,好多代码本身都是错的.我修改后才能跑起来.综上所述:所以今天我摸索了一 ...