jQuery实现的手机发送验证码倒计时效果代码分享


Posted in Javascript onAugust 24, 2015

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

效果描述:

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

运行效果:

jQuery实现的手机发送验证码倒计时效果代码分享

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery手机发送验证码倒计时代码</title>
<link href="css/3water.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>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
jquery 图片轮换效果
Jul 29 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 #Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 #Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 #Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 #Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 #Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 #Javascript
微信JSSDK上传图片
Aug 23 #Javascript
You might like
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python模块文件结构代码详解
2018/02/03 Python
pycharm设置注释颜色的方法
2018/05/23 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
简单了解python元组tuple相关原理
2019/12/02 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
学习心得体会
2014/01/01 职场文书
应届生自荐信范文
2014/02/21 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书