发送短信验证码倒计时&&防止刷新

html代码

<input type="button" id="btn" class="sms-btn" onclick="sendPh()" value=‘获取验证码‘ />

js代码 倒计时
function timekeeping(){
//把按钮设置为不可以点击
$(‘#btn‘).attr("disabled", true);
var interval=setInterval(function(){//每秒读取一次cookie
//从cookie 中读取剩余倒计时
total=$.cookie("total"); 存入Cookie 防止页面刷新
//在发送按钮显示剩余倒计时
$(‘#btn‘).val(‘请等待‘+total+‘秒‘);
//把剩余总倒计时减掉1
total--;
if(total==0){//剩余倒计时为零,则显示 重新发送,可点击
//清除定时器
clearInterval(interval);
//删除cookie
total=$.cookie("total",total, { expires: -1 });
//显示重新发送
$(‘#btn‘).val(‘重新发送‘);
//把发送按钮设置为可点击
$(‘#btn‘).attr("disabled", false);
}else{//剩余倒计时不为零
//重新写入总倒计时
$.cookie("total",total);
}
},1000);
}

function sendPh(){
phone=$(‘#mobile_phone‘).val();
$.post(phone_url, {mobile:phone}, function(data, textStatus, xhr) {
$.cookie("total",60);
timekeeping();
});
}

防刷新 html中加入js
<script type="text/javascript">
$(function(){
if($.cookie("total")!=undefined&&$.cookie("total")!=‘NaN‘&&$.cookie("total")!=‘null‘){
timekeeping();
}else{
$(‘#btn‘).attr("disabled", false);
}
});
</script>

原文地址:https://blog.51cto.com/13708834/2353244

时间: 2024-08-29 05:29:33

发送短信验证码倒计时&&防止刷新的相关文章

js 发送短信验证码倒计时

html <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> js // 短信验证码倒计时var countdown=60;function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value=&

发送短信验证码 倒计时

1.页面样式:基于bootstrap 1 <div class="form-group"> 2 <label class="col-md-4 control-label">手机号码</label> 3 <div class="col-md-8"> 4 <div class="input-group m-b"> 5 <input class="form-

前端常用库-发送短信验证码倒计时60秒

带ajax验证原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!doctype html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript">

程序君带你畅聊发送短信验证码

现在不管是网站,还是app等互联网和移动互联网产品,绝大部分注册都是直接用手机号注册登录的,方式就是给手机发送短信验证码,然后把验证码填入,后台程序去匹配判断用户填入的验证码和发送的是否一致. 我最近做的好几个项目都用到了发送短信验证码的这个第三方接口,其实这个发送验证码的原理很简单,实现也很简单. 如下三个图,是我做的其中一个项目的相关效果截图: 我用的比较多的第三方短信接口是容联-云通讯的(http://www.yuntongxun.com/),它的API挺强大的,也挺稳定的,使用也不难,有

短信验证码倒计时

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="yan.aspx.cs" Inherits="Technology.yan" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server&

超实用的JavaScript代码段 Item4 --发送短信验证码

发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试” <!doctype html> <html lang="en"> <head> <met

微信小程序发送短信验证码完整实例

微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class="container"> <view class='row'> <input placeholder='请输入姓名' bindinput='bindNameInput'/> </view> <view class='row'> <inpu

JAVA利用第三方平台发送短信验证码。

前段时间自己做的一个小项目中,涉及到用短信验证码登录.注册的问题,之前没涉及过这一块,看了别人的博客其实也是似懂非懂的,现在就将自己做的利用第三方短信平台来发送验证码这个功能记下来. 本文以注册为例,在SpringMVC+Spring+Mybatis框架的基础上完成该短信验证码功能. 发送短信验证码的原理是:随机生成一个6位数字,将该6位数字保存到session当中,客户端通过sessionid判断对应的session,用户输入的验证码再与session记录的验证码进行比较. 为了防止有广告嫌疑

各大APP注册时发送短信验证码是怎么实现的?

回答这个问题可以从多个角度来回答,比如商务角度和技术角度,为了快速清晰的让广大的读者了解这个过程,本文我们从商务角度来深入分析. 实现原理 现各大APP发送短信的服务一般是由第三方短信服务商提供的,他们整合了移动,联通.电信三方资源,三网都可以发送,这样就不需要直接对接运营商了. 发送短信验证码主要是为了验证手机方的真实性,实现原理简单说就是系统先生成一个验证码,调用第三方服务商的短信接口,发送到手机方,手机方输入验证码,再由系统去校验是否符合,符合则说明手机真实有效. 服务商选择 提供短信接入