我们在网站建设中,比喻会员注册等需要用到的发送手机验证码倒计时效果,具体请看如下:
第一种:普通效果,刷新页面倒计时失效
<script type="text/javascript">
var InterValObj; //timer变量,控制时间
var count = 120; //间隔函数,1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
curCount = count;
var phone=$("#mob").val();//手机号码
if(phone != ""){
//产生验证码
//设置button效果,开始计时
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val(curCount + "秒后可重发验证码");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
//向后台发送处理数据
$.ajax({
type: "POST", //用POST方式传输
dataType: "text", //数据格式:JSON
url: '/pims/send.php', //目标地址
data: "phone=" + phone,
error: function (XMLHttpRequest, textStatus, errorThrown) { },
success: function (msg){
//alert(msg);
}
});
}else{
alert("手机号码不能为空!");
}
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").val("重新发送验证码");
code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效
}
else {
curCount--;
$("#btnSendCode").val(curCount + "秒后可重发验证码");
}
}
</script>
<input type='text' name='mob' id="mob">
<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />
<input type='text' name='mobcode' class='inputxt' datatype='*' nullmsg='手机验证码不能留空!'>
第二种:使用js操作cookie实现防页面刷新
<input id="second" type="button" value="免费获取验证码" />
<script>
//发送验证码时添加cookie
function addCookie(name,value,expiresHours){
var cookieString=name+"="+escape(value);
//判断是否设置过期时间,0代表关闭浏览器时失效
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000);
cookieString=cookieString+";expires=" + date.toUTCString();
}
document.cookie=cookieString;
}
//修改cookie的值
function editCookie(name,value,expiresHours){
var cookieString=name+"="+escape(value);
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
cookieString=cookieString+";expires=" + date.toGMTString();
}
document.cookie=cookieString;
}
//根据名字获取cookie的值
function getCookieValue(name){
var strCookie=document.cookie;
var arrCookie=strCookie.split("; ");
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
if(arr[0]==name){
return unescape(arr[1]);
break;
}else{
return "";
break;
}
}
}
/*业务逻辑*/
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
//v = getCookieValue("secondsremained");//获取cookie值
v = getCookieValue("secondsremained")?getCookieValue("secondsremained"):0;//获取cookie值
if(v>0){
settime($("#second"));//开始倒计时
}
})
//发送验证码
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s
settime(obj);//开始倒计时
}
}
//将手机利用ajax提交到后台的发短信接口
function doPostBack(url,backFunc,queryParam) {
$.ajax({
async : false,
cache : false,
type : 'POST',
url : url,// 请求的action路径
data:queryParam,
error : function() {// 请求失败处理函数
},
success : backFunc
});
}
function backFunc1(data){
var d = $.parseJSON(data);
if(!d.success){
alert(d.msg);
}else{//返回验证码
alert("模拟验证码:"+d.msg);
$("#code").val(d.msg);
}
}
//开始倒计时
var countdown;
function settime(obj) {
countdown=getCookieValue("secondsremained");
if (countdown == 0) {
obj.removeAttr("disabled");
obj.val("免费获取验证码");
return;
} else {
obj.attr("disabled", true);
obj.val("重新发送(" + countdown + ")");
countdown--;
editCookie("secondsremained",countdown,countdown+1);
}
setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
}
//校验手机号是否合法
function isPhoneNum(){
var phonenum = $("#phonenum").val();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phonenum)){
alert('请输入有效的手机号码!');
return false;
}else{
return true;
}
}
</script>
第三种:使用localStorage存储验证码,实现防止页面刷新
//业务逻辑
<script>
$(function() {
var btn = document.getElementById("btn-getcode");
//调用监听
monitor($(btn));
//点击click
btn.onclick = function() {
//倒计时效果 getCode回调函数 获取验证码api
countDown($(this), getCode);
};
function getCode() {
$.get("http://192.168.50.242:8080/demo/js/json.json", {}, function(res) {
if (res.code == 000) {
console.log("验证码将发送到你手机");
} else {
alert(res.message);
}
});
}
});
</script>
//功能实现
/**
*
* @param {Object} obj 获取验证码按钮
*/
function monitor(obj) {
var LocalDelay = getLocalDelay();
var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000);
if (timeLine > LocalDelay.delay) {
console.log("过期");
} else {
_delay = LocalDelay.delay - timeLine;
obj.text(_delay).addClass("btn-disabled");
var timer = setInterval(function() {
if (_delay > 1) {
_delay--;
obj.text(_delay);
setLocalDelay(_delay);
} else {
clearInterval(timer);
obj.text("获取验证码").removeClass("btn-disabled");
}
}, 1000);
}
};
//倒计时效果
/**
*
* @param {Object} obj 获取验证码按钮
* @param {Function} callback 获取验证码接口函数
*/
function countDown(obj, callback) {
if (obj.text() == "获取验证码") {
var _delay = 60;
var delay = _delay;
obj.text(_delay).addClass("btn-disabled");
var timer = setInterval(function() {
if (delay > 1) {
delay--;
obj.text(delay);
setLocalDelay(delay);
} else {
clearInterval(timer);
obj.text("获取验证码").removeClass("btn-disabled");
}
}, 1000);
callback();
} else {
return false;
}
}
//设置setLocalDelay
function setLocalDelay(delay) {
//location.href作为页面的唯一标识,可能一个项目中会有很多页面需要获取验证码。
localStorage.setItem("delay_" + location.href, delay);
localStorage.setItem("time_" + location.href, new Date().getTime());
}
//getLocalDelay()
function getLocalDelay() {
var LocalDelay = {};
LocalDelay.delay = localStorage.getItem("delay_" + location.href);
LocalDelay.time = localStorage.getItem("time_" + location.href);
return LocalDelay;
}
上一篇: 关于thinkphp5的上传、图片处理、多语言处理方法
下一篇: 如何利用jquery实现多条件筛选
售后保障
承诺任何问题1小时内解决数据备份
更安全、更高效、更稳定价格公道精准
项目经理精准报价不弄虚作假合作无风险
重合同讲信誉,无效全额退款