基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus?">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Document</title>

<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>

<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<!-- <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->

</head>

<body>

<input id="phonenum" type="text" value="18518181818"/>

<input id="second" type="button" value="免费获取验证码" />

</body>

<script>

//发送验证码时添加cookie

function addCookie(name,value,expiresHours){

//判断是否设置过期时间,0代表关闭浏览器时失效

if(expiresHours>0){

var date=new Date();

date.setTime(date.getTime()+expiresHours*1000);

$.cookie(name, escape(value), {expires: date});

}else{

$.cookie(name, escape(value));

}

}

//修改cookie的值

function editCookie(name,value,expiresHours){

if(expiresHours>0){

var date=new Date();

date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒

$.cookie(name, escape(value), {expires: date});

} else{

$.cookie(name, escape(value));

}

}

//根据名字获取cookie的值

function getCookieValue(name){

return $.cookie(name);

}

$(function(){

$("#second").click(function (){

sendCode($("#second"));

});

v = getCookieValue("secondsremained");//获取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);//开始倒计时

}

}

//开始倒计时

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>

</html>

时间: 2024-08-26 07:19:43

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)的相关文章

js实现发送短信验证码后的倒计时功能(无视页面刷新)

[1].[代码] 这是页面上的发送验证码按钮 跳至 [1] [2] [3]<input id="second" type="button" value="免费获取验证码" />[2].[代码] js对cookie的操作 跳至 [1] [2] [3] //发送验证码时添加cookiefunction addCookie(name,value,expiresHours){ var cookieString=name+"=&quo

jQuery实现发送短信验证码后60秒倒计时

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown=60; functi

(生鲜项目)17. drf实现发送短信验证码功能

第一步; 前期分析 由于之前在设计model的时候, 我们已经决定对code进行数据库保存, 所以这里我们应该使用 mixins.CreateModelMixin 同时, 用户发过来的手机号码, 我们在后端应该执行自己的验证, 包括 手机号码是否被注册 手机号码是否合法  [在settings.py中加上 REGEX_MOBILE="^1[358]\d{9}$|^147\d{8}$|^176\d{8}$"] 两次验证码的间隔是否大于60秒 基于以上考虑, 我们需要创建一个 serial

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

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

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

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

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

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

阿里云短信服务发送短信验证码(JAVA开发此功能)

开发此功能需注册阿里云账号,并开通短信服务(免费开通) 充值后,不会影响业务的正常使用!(因为发送验证类短信:1-10万范围的短信是0.045元/条).开发测试使用,充2块钱测试足够了 可参考阿里云官方开发文档了解详情,文档中写的也是很详细了... https://help.aliyun.com/product/44282.html 代码编写之前需要准备几个东西 1,aliyun-java-sdk-core.jar ,  aliyun-java-sdk-dysmsapi.jar  这2个jar包

android发送短信验证码并自动获取验证码填充文本框

android注册发送短信验证码并自动获取短信,截取数字验证码填充文本框. 一.接入短信平台 首先需要选择短信平台接入,这里使用的是榛子云短信平台(http://smsow.zhenzikj.com), 两分钟申请测试账号,赠送了100条测试短信. android使用java的jar包即可开发 jar下载: http://smsow.zhenzikj.com/doc/sdk.html API文档:http://smsow.zhenzikj.com/doc/java_sdk_doc.html 使用

python利用第三方模块,发送短信验证码

对于初学者,如何利用第三方python开发包发送短信验证码,下面是具体的实现和记录过程! 环境:虚拟机上centos7平台,python3.7版本: 第三方短信平台:榛子云短信(smsow.zhenzikj.com) SDK下载地址: smsow.zhenzikj.com/sdkdownload- 注意要下载python3的 API文档: smsow.zhenzikj.com/doc/python_- 首先,申请账号的部分就省略了 1. 获得appid和appSecret 使用申请的账号,登录用