<!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 验证码倒计时的更多相关文章

  1. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  2. js 验证码倒计时效果

    function settime(obj) { if(second == 0){ obj.removeAttribute("disabled"); obj.value=" ...

  3. js验证码倒计时

    var wait=59; function time(){ if(wait >= 0){ $("#buttons").val("" + wait + &q ...

  4. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  5. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  6. js之验证码倒计时功能

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  7. js验证码有效时间倒计时

    js验证码有效时间倒计时 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...

  8. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

  9. js 发送短信验证码倒计时

    html <input type="button" id="btn" value="免费获取验证码" onclick="se ...

随机推荐

  1. 开启Unity3D之旅

    圣典知识目录http://game.ceeger.com/Manual/ NGUI http://www.taikr.com/course/34泰课课程 http://tieba.baidu.com/ ...

  2. uoj#213. 【UNR #1】争夺圣杯

    http://uoj.ac/problem/209 单调栈求出每个位置x左边第一个大于它的位置L[x]和右第一个不小于它的位置R[x],于是矩形L[x]<=l<=x<=r<=R ...

  3. bzoj4020: 未来程序·改

    只需写一个解释器 第一次预处理将输入进行分词,分割出 关键字,运算符,变量/函数名,整数常量,并对变量/函数名离散化以便处理 第二次预处理建语法树,每个节点存节点类型,变量定义表等信息 运行时在语法树 ...

  4. Apollo分布式配置中心部署以及使用

    一.简介Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理场 ...

  5. 二进制编译安装httpd服务

    systemctl stop httpd yum remove httpd-----------------------(在做之前 先删掉httpd) 安装编译环境 yum -y groupinsta ...

  6. [UE4]更通用的接口，将UserWidget作为图标添加到小地图

    将图标改成UserWidget添加到小地图,UserWidget支持动画特效,更丰富小地图的功能. 一.在小地图图标结构体中,将Flag数据类型改成UserWidget,删除ImageWidget(类 ...

  7. Gini系数的原理

    转载:https://blog.csdn.net/u010665216/article/details/78528261 首先,我们直接构造赛题结果:真实数据与预测数据: predictions = ...

  8. （转）区分LTE,EPS,EPC和SAE

    LTE:Long Term Evolution长期演进,是无线接口部分向4G演进的工作项目. 3GPP:The 3Rd Generation Partnership Project,第三代合作伙伴计划 ...

  9. iOS 懒加载 字典转模型

    >>>懒加载 一.介绍 懒加载又称延时加载,即在系统调用时加载,如果系统不调用则不会加载,所谓懒加载其实就是重写其get方法. 在使用懒加载时要先判断该方法是否存在,如果不存在再进行 ...

  10. centos7安装gitlab并汉化

    一.基础环境准备 1.安装依赖包 [root@gitlab-server ~]#yum install curl policycoreutils openssh-server openssh-clie ...