<!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. KMeans (K均值)算法讲解及实现

    算法原理 KMeans算法是典型的基于距离的聚类算法,采用距离作为相似性的评价指标,即认为两个对象的距离越近,其相似度就越大.该算法认为簇是由距离靠近的对象组成的,因此把得到紧凑且独立的簇作为最终目标 ...

  2. 云区域（region)，可用区（AZ），跨区域数据复制（Cross-region replication）与灾备（Disaster Recovery）（部分1）

    本文分两部分:部分1 和 部分2.部分1 介绍 AWS,部分2 介绍阿里云和OpenStack云. 1. AWS 1.1 AWS 地理组件概况 AWS 提供三种地理性组件: Regions:区域,即A ...

  3. 学习笔记之1001 Inventions That Changed the World

    1001 Inventions That Changed the World: Jack Challoner: 9780764161360: Amazon.com: Books https://www ...

  4. 廖雪峰Java3异常处理-1错误处理-2捕获异常

    1捕获异常 1.1 finally语句保证有无错误都会执行 try{...}catch (){...}finally{...} 使用try...catch捕获异常 可能发生异常的语句放在try{... ...

  5. Selector空轮询处理(转载)

    https://www.cnblogs.com/my_life/articles/5556939.html Selector空轮询处理 在NIO中通过Selector的轮询当前是否有IO事件,根据JD ...

  6. Android-PullToRefresh 下拉刷新增加setOnItemLongClickListener

    项目地址:https://github.com/chrisbanes/Android-PullToRefresh 不知道为什么这个项目没有给listview 加  OnItemLongClickLis ...

  7. 十三篇系列：king转折点，wooga瓶颈，supercell营收结构

    转自:http://gamerboom.com/archives/95125 十三篇系列:king的历史转折点,wooga的瓶颈,supercell的营收结构 第一篇 这句话In other word ...

  8. sublime 格式化react插件配置教程 jsfmt配置

    1.下载如下插件: https://github.com/ionutvmi/sublime-jsfmt#installation 这个插件是jsfmt,可以直接在package里搜索到: 2.user ...

  9. 当别人给你一个wsdl或者webservice接口时

    一  通过wsdl生成客户端 引用于http://www.cnblogs.com/yisheng163/p/4524808.html 参照http://www.cnblogs.com/xdp-gacl ...

  10. Pyhton-Web框架之【Django】

    一.什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有的 ...