js实现手机发送验证码功能


Posted in Javascript onMarch 13, 2017

效果图:

js实现手机发送验证码功能

代码如下:

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发送验证码倒计时功能</title>
<style>
@charset "utf-8";
*{ margin:0; padding:0; list-style:none}
body{ background:#EBECED; font-family:'微软雅黑'}
.form{width: 450px;height: auto; margin:100px auto; overflow:hidden;font-size: 16px;color: #1b1b1b;text-align: left; padding:50px; border:1px solid #ccc; border-radius:10px;}
.form div{padding:5px 0;overflow: hidden;}
.form label{width: 90px;display: block;float: left;}
.form .infos{width:200px;height: 26px;line-height: 26px;border:1px solid #BFBFBF;padding:2px;border-radius:4px;float: left;}
.form .div-phone a.send1{height: 26px;text-decoration:none;line-height: 26px;padding:2px;width: 80px;background: #AA8926;font-family: '宋体';color: #fff;font-size: 12px;text-align: center;display: block;float: left;border-radius:2px;margin-left:2px;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.form .div-phone a.send1:hover{text-decoration: none;background: #866c1b;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.form .div-phone a.send0{height: 26px;text-decoration:none;line-height: 26px;padding:2px;width: 80px;background: #A1A1A1;font-family: '宋体';color: #fff;font-size: 12px;text-align: center;display: block;float: left;border-radius:2px;margin-left:2px;}
.form .div-phone a.send0:hover{background: #A1A1A1;font-family: '宋体';color: #fff;font-size: 12px;text-decoration: none;}
.form span.error{height: 26px;line-height: 26px;padding:2px;width: 100px;color: red;padding-left:20px;display: block;float: left;margin-left:10px;font-size: 12px;font-family: '宋体';background: url(../images/error.png) no-repeat left center;}
.form #phone{width: 116px;}
.form .div-conform{padding-right:153px;}
.form .div-conform a.conform{width: 136px;height: 34px;display: block;text-align: left;overflow: hidden;background: url(../images/btn.jpg) no-repeat;float: right;text-indent: -1000px;}
</style>
</head>
<body>
<!--代码部分begin-->
<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:;" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" class="conform" onclick="sends.conform();">提交</a>
 </div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.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 相关文章推荐
js验证表单大全
Nov 25 Javascript
jQuery 性能优化指南 (1)
May 21 Javascript
比较简单的异步加载JS文件的代码
Jul 18 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
jquery实用代码片段集合
Aug 12 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 #Javascript
原生js实现吸顶效果
Mar 13 #Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 #Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 #Javascript
深入理解Node.js中的进程管理
Mar 13 #Javascript
jQuery简易时光轴实现方法示例
Mar 13 #Javascript
JavaScript评论点赞功能的实现方法
Mar 13 #Javascript
You might like
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
强制设为首页代码
2006/06/19 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
django项目中新增app的2种实现方法
2020/04/01 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
初中生300字旷课检讨书
2014/11/19 职场文书
交通安全月活动总结
2015/05/08 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
运动员入场词
2015/07/18 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
关于MySQL中的 like操作符详情
2021/11/17 MySQL