JS/jQ实现免费获取手机验证码倒计时效果


Posted in Javascript onJune 13, 2016

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码。

JS/jQ实现免费获取手机验证码倒计时效果

如何获取手机验证码?

小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的。

LeanCloud :https://leancloud.cn/

文档:https://leancloud.cn/docs/sms_guide-js.html

在这个平台首先去要注册一个账号,在设置里面设置自己的信息按照文档去操作就可以了这里不多说了,大部分是后台去操作些接口的,我们前端有能力的可以自己去尝试用php去写接口。(懒惰的我是不会写。)

一般是两个接口:

1.发送验证请求(这样你的手机会受到短信验证哦)

2.返回数据验证手机号和验证是否一致

根据后台攻城狮的接口去实现吧。

前端页面的工作

下面这段代码就是上图所示的页面

<div class="pop">
<div class="con">
<span class="close"><img src="img/close.png"></span>
<div class="page1">
<p class="info">
<span class="title">手机号:</span>
<input type="tel" class="tel" id="mobile" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" required="" placeholder="请输入您的手机号">
</p>
<p class="info">
<span class="title">验证码:</span>
<input type="tel" class="code" placeholder="输入验证码">
<span class="code1">获取验证码</span>
</p>
<div class="demand demand2" style="width: 70%; margin-top: 20px;">提交</div>
</div>
<div class="page2">
<p class="p1">提交成功</p>
<p class="p2">我们将在索要成功后</p>
<p class="p2">第一时间通知您!</p>
<div class="demand demand3" style="width: 80%; margin-top: 20px; margin-bottom: 10px;">朕知道了</div>
</div>
</div>
</div>

校验手机号是否正确

//校验手机号
//页面的input写的正则下面直接调用方法就可以的
jQuery.extend({
checkmobileNo: function(str) {
var re =/^1[3|7|5|8]\d{9}$/;
if (re.test(str)) {
return true;
} else {
return false;
}
}
});

JS/JQ部分处理发送短信验证请求

//发送验证码给手机 
$.ajax({
type: 'GET',
url:"你们后台提供的接口" + mobile, //即上面的接口1
success: function(data, status) {
if (data.errcode==0) {
alert("已发送");
$(".code1").attr("disabled", "disabled");
$(".code1").css("background-color", "#b4b2b3");
//下面就是实现倒计时的效果代码
var d = new Date();
d.setSeconds(d.getSeconds() + 59);
var m = d.getMonth() + 1;
var time = d.getFullYear() + '-' + m + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
var id = ".code1";
var end_time = new Date(Date.parse(time.replace(/-/g, "/"))).getTime(),
//月份是实际月份-1
sys_second = (end_time - new Date().getTime()) / 1000;
var timer = setInterval(function() {
if (sys_second > 1) {
sys_second -= 1;
var day = Math.floor((sys_second / 3600) / 24);
var hour = Math.floor((sys_second / 3600) % 24);
var minute = Math.floor((sys_second / 60) % 60);
var second = Math.floor(sys_second % 60);
var time_text = '';
if (day > 0) {
time_text += day + '天';
}
if (hour > 0) {
if (hour < 10) {
hour = '0' + hour;
}
time_text += hour + '小时';
}
if (minute > 0) {
if (minute < 10) {
minute = '0' + minute;
}
time_text += minute + '分';
}
if (second > 0) {
if (second < 10) {
second = '0' + second;
}
time_text += second + '秒';
}
$(id).text(time_text);
} else {
clearInterval(timer);
$(".code1").attr("disabled", false);
$(".code1").text('获取验证码');
$(".code1").css("background-color", "#f67a62");
}
},
1000); 
}else{
alert("发送失败,请再试一次。");
}
},
error: function(data, status) {
alert(status);
}
});
});

向服务器提交信息

//验证验证码和手机发送的验证码是否一致
$.ajax({
type: 'GET',
url: "接口2",
success: function(data, status) {
if (data.errcode==0) {
//向服务器提交信息
$.ajax({
type: 'POST',
url: "向服务器提交你们索要填写的信息接口",
data: JSON.stringify({ //data这里看你们的需求根据接口的数据去写
"project_id": pid,
"phone": mobile,
"device":d
}),
success: function(data, status) {
if (data.errcode==0) {
$('.page1').hide();
$('.page2').show();
}else{
alert("提交失败,请在尝试一次!");
}
},
error: function(data, status) {
alert(data.errMsg);
}
});
}else{
alert("验证码不正确!");
}
},
error: function(data, status) {
alert(status);
}
});
});

以上所述是小编给大家介绍的JS/jQ实现免费获取手机验证码倒计时效果的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 #Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 #Javascript
BootStrap智能表单demo示例详解
Jun 13 #Javascript
Bootstrap布局之栅格系统详解
Jun 13 #Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 #Javascript
jquery制做精致的倒计时特效
Jun 13 #Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
php中的观察者模式
2010/03/24 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
javascript截取字符串小结
2015/04/28 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
洗发露广告词
2014/03/14 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
毕业论文评语大全
2014/04/29 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
《落花生》教学反思
2016/02/16 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
python删除csv文件的行列
2021/04/06 Python
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python