js 验证码倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机验证码</title>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container phone">
<div class="banner">
<img src="data:images/bind-mobile.jpg" alt="">
</div>
<div class="register-form">
<ul>
<li class="rf1">
<input id="mobile" type="text" name="number" placeholder="手机号">
</li> <li class="rf4">
<input type="text" name="yzm" placeholder="验证码">
<input id="getting" type="button" value="获取验证码">
</li>
<li class="rf5">
<input type="submit" value="确定">
</li>
</ul>
</div>
</div>
</body>
</html>
<script>
$(function(){
/*仿刷新：检测是否存在cookie*/
if($.cookie("captcha")){
var count = $.cookie("captcha");
var btn = $('#getting');
btn.val(count+'秒后刷新').attr('disabled',true).css('cursor','not-allowed');
var resend = setInterval(function(){
count--;
if (count > 0){
btn.val(count+'秒后刷新').attr('disabled',true).css('cursor','not-allowed');
$.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
}else {
clearInterval(resend);
btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');
}
}, 1000);
} /*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/
$('#getting').click(function(){
if($('#mobile').val()==""){
alert('请输入手机号');
}else{
var btn = $(this);
var count = 60;
var resend = setInterval(function(){
count--;
if (count > 0){
btn.val(count+"秒后刷新");
$.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
}else {
clearInterval(resend);
btn.val("获取验证码").removeAttr('disabled style');
}
}, 1000);
btn.attr('disabled',true).css('cursor','not-allowed');
}
}); }); </script>
js 验证码倒计时的更多相关文章
- js 验证码 倒计时60秒
js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...
- js 验证码倒计时效果
function settime(obj) { if(second == 0){ obj.removeAttribute("disabled"); obj.value=" ...
- js验证码倒计时
var wait=59; function time(){ if(wait >= 0){ $("#buttons").val("" + wait + &q ...
- js&jq 发送验证码倒计时
<input type="text" name='' id="btn"> //发送验证码倒计时var wait=30; function t ...
- 原生 JS 实现手机验证码倒计时
可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...
- js之验证码倒计时功能
<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...
- js验证码有效时间倒计时
js验证码有效时间倒计时 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...
- js 发送短信验证码倒计时
html <input type="button" id="btn" value="免费获取验证码" onclick="se ...
随机推荐
- bzoj 4811: [Ynoi2017]由乃的OJ
树链剖分,用zkw线段树维护每条链两个方向上对每一位的变换情况,由于位数较少,可以用两个unsigned long long表示 #include<cstdio> typedef unsi ...
- 《Java并发编程实战》笔记-取消与关闭
1,中断是实现取消的最合理方式.2,对中断操作的正确理解是:它并不会真正地中断一个正在运行的线程,而只是发出中断请求,然后由线程在下一个合适的时刻中断自己.3,区分任务和线程对中断的反应是很重要的4, ...
- PAT 乙级 1069 微博转发抽奖(20) C++版
1069. 微博转发抽奖(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 小明PAT考了满分,高兴之余决定 ...
- vue-router配合vue-cli的实例
前面在说到vue-router的时候,都是用最简单的方式说明用法的,但是在实际项目中可能会有所出入,所以,今天就结合vue脚手架来展示项目中的vue-router的用法. 创建项目 首先需要使用脚手架 ...
- 即用了 测试脚本里面的 类的值，又继承了 unittest类 使用他的断言方法 (接口自动化 数据分离 变量相互调用 看这里)
- Rehash死锁的问题
为什么都说HashMap是线程不安全的呢?它在多线程环境下,又会发生什么情况呢? resize死循环 我们都知道HashMap的初始容量是16,一般来说,当插入数据时,都会检查容量有没有超过设定的th ...
- T-SQL 有参数存储过程的创建与执行
use StudentManager go if exists(select * from sysobjects where name='usp_ScoreQuery2') drop procedur ...
- MySQL 迁移并搭建主从（实践）
第一阶段 一.数据的初始化 1.老主库 关闭sql_log_binset sql_log_bin = off; 创建导出用户grant all privileges on *.* to 'dump'@ ...
- Linux平台下源码安装mysql多实例数据库
Linux平台下源码安装mysql多实例数据库[root@linux-node1 ~]# netstat -tlunp | grep 330tcp6 0 0 :::3306 :::* LISTEN 6 ...
- scala使用hbase新api
import org.apache.hadoop.hbase.{HTableDescriptor,HColumnDescriptor,HBaseConfiguration,TableName} imp ...