<!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="//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>

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

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

    [1].[代码] 这是页面上的发送验证码按钮 跳至 [1] [2] [3]<input id="second" type="button" value=& ...

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

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  3. Yii2发送短信验证码完全解决方案

    概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...

  4. day101:MoFang:模型构造器ModelSchema&注册功能之手机号唯一验证/保存用户注册信息/发送短信验证码

    目录 1.模型构造器:ModelSchema 1.SQLAlchemySchema 2.SQLAlchemyAutoSchema 2.注册功能基本实现 1.关于手机号码的唯一性验证 2.保存用户注册信 ...

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

    发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...

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

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...

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

    android注册发送短信验证码并自动获取短信,截取数字验证码填充文本框. 一.接入短信平台 首先需要选择短信平台接入,这里使用的是榛子云短信平台(http://smsow.zhenzikj.com) ...

  8. java 阿里云接口实现发送短信验证码

    此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册   已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...

  9. 阿里云短信服务发送短信验证码（JAVA开发此功能）

    开发此功能需注册阿里云账号,并开通短信服务(免费开通) 充值后,不会影响业务的正常使用!(因为发送验证类短信:1-10万范围的短信是0.045元/条).开发测试使用,充2块钱测试足够了 可参考阿里云官 ...

随机推荐

  1. linux服务器文件删除空间却未释放

    在Linux或者Unix系统中,通过rm或者文件管理器删除文件将会从文件系统的目录结构上解除链接(unlink),然而如果文件是被打开的(有一个进程正在使用),那么进程将仍然可以读取该文件,磁盘空间也 ...

  2. VC2010下Qt5的中文乱码问题

    要搞清楚这个问题,先要弄明白编码.但是编码问题实在太复杂,这里肯定讲不开. 我先找一个例子,比如:“中文” 的 Unicode 码点/UTF8编码/GBK 分别是多少. 先去这个网站,输入 “中文” ...

  3. Hive调优实战[转]

    Hive优化总结 [转自:http://sznmail.iteye.com/blog/1499789] 优化时,把hive sql当做map reduce程序来读,会有意想不到的惊喜. 理解hadoo ...

  4. PhantomJS与CasperJS在Windows下的安装与使用

    按照网上的教程来呢,一定是不好使的,这是常理. 所以必须要告诉你怎么使用Phantomjs…… 这么用! 1.下载Phantomjs的压缩包并解压缩: 2.在bin目录(包含phantomjs.exe ...

  5. eclipse下properties配置文件中文乱码解决

    properties文件常带有中文注释,eclipse显示是乱码. 安装插件(properties editor)可以解决properties配置文件乱码的问题. 菜单 : Help->Ecli ...

  6. OpenLdap 相关命令

    相关命令: |-slapd 目录服务的主要程序|-slurpd 目录服务进行复制的程序|-slapadd 向目录中添加数据|-slapcat 把目录中的条目导出成ldif文件|-slapindex 重 ...

  7. ucenter通信失败和不能登录的解决

    对于ucenter真是让人不省心,修改一下url,就通信失败了. 1.通信失败 然后后来怎么也改不好了,后来一步一步打log,发现是uc_server和uc_client不一致. 检查uc_serve ...

  8. 【Unity笔记】一些Mecanim动画系统、状态机的参数细节

    动画混合树Blend Tree调整动画片段的播放速度: 0 动画不播放 -1 动画倒着播放:如果只有“往前走”的动画,可以变成“往后走”动画 勾选动画是否镜像: 左右颠倒(挥左手变成挥右手) 过度条件 ...

  9. Android——ArrayList 、LinkList、List 区别 & 迭代器iterator的使用 & HashMap、Hashtable、LinkedHashMap、TreeMap

     ArrayList .LinkList.List 区别 & 迭代器iterator的使用 & HashMap.Hashtable.LinkedHashMap.TreeMap 一.几个 ...

  10. 将hive的hql执行结果保存到变量中

    这里分别针对shell脚本和python脚本举例: shell脚本如下: 注意:在hive语句左右两边使用的是ESC键下面的点号,不是单引号. #!/usr/bin/env bash test1=`h ...