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 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
javascript常用的方法整理
Aug 20 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
基于PHP静态类的原罪详解
2013/05/06 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
培训主管的职业生涯规划
2014/03/06 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2014年节能工作总结
2014/12/18 职场文书
学校食品安全责任书
2015/01/29 职场文书
保管员岗位职责
2015/02/14 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
logback如何自定义日志存储
2021/08/30 Java/Android
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏