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 相关文章推荐
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
javaScript之split与join的区别(详解)
Nov 08 Javascript
基于vue.js实现分页查询功能
Dec 29 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
php你的验证码安全码?
2007/01/02 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
最佳JS代码编写的14条技巧
2011/01/09 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
学生信息管理系统python版
2018/10/17 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
毕业论文评语大全
2014/04/29 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2014年环保局工作总结
2014/12/11 职场文书
结婚主持人致辞
2015/07/28 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript