基于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=
"//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实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)的更多相关文章
- js实现发送短信验证码后的倒计时功能(无视页面刷新)
[1].[代码] 这是页面上的发送验证码按钮 跳至 [1] [2] [3]<input id="second" type="button" value=& ...
- jQuery实现发送短信验证码后60秒倒计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- Yii2发送短信验证码完全解决方案
概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...
- day101:MoFang:模型构造器ModelSchema&注册功能之手机号唯一验证/保存用户注册信息/发送短信验证码
目录 1.模型构造器:ModelSchema 1.SQLAlchemySchema 2.SQLAlchemyAutoSchema 2.注册功能基本实现 1.关于手机号码的唯一性验证 2.保存用户注册信 ...
- 超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...
- 微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...
- android发送短信验证码并自动获取验证码填充文本框
android注册发送短信验证码并自动获取短信,截取数字验证码填充文本框. 一.接入短信平台 首先需要选择短信平台接入,这里使用的是榛子云短信平台(http://smsow.zhenzikj.com) ...
- java 阿里云接口实现发送短信验证码
此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册 已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...
- 阿里云短信服务发送短信验证码(JAVA开发此功能)
开发此功能需注册阿里云账号,并开通短信服务(免费开通) 充值后,不会影响业务的正常使用!(因为发送验证类短信:1-10万范围的短信是0.045元/条).开发测试使用,充2块钱测试足够了 可参考阿里云官 ...
随机推荐
- 《ZedBoard各种资料网址备份记录》
转载来自于:http://http//www.eefocus.com/crazybingo/blog/2013-02/289101_ab4c8.html 1. Xilinx FPGA相关连接 1) X ...
- C#二叉树简易实例
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- 使用自定义的按钮替换默认的<input type='file'>
可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){ $.fn.brow ...
- C语言可变参数宏及‘##’在可变参数中的作用
测试代码及解释: #include <stdio.h> #define PRINT(x) printf x #define SECONDPRINT(fmt,arg...) printf(f ...
- hdoj 1166 敌兵布阵 线段数和树状数组
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- linux没有那个文件或目录
linux脚本执行 报错 没有那个文件或目录 但是ls 看一下,明明有文件 原因: vim filename然后用命令 :set ff可看到dos或unix的字样,如果的确是dos格式的, 那么用se ...
- dvwa 源码分析(二) --- dvwaPage.inc.php分析
在setup.php中,包含了这个文件,所以这里分析这个文件. <?php if( !defined( 'DVWA_WEB_PAGE_TO_ROOT' ) ) { define( 'DVWA S ...
- html5和css3打造一款创意404页面
之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览 源码下载 实现的代码. h ...
- 存储过程中得到新增数据的ID
数据库中有自增字段UID 存储过程如下: CREATE PROCEDURE AddUser ( @Username nvarchar(50), @Email ...
- ExtJs Ext.data.Model 学习笔记
Using a Proxy Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'], proxy: ...