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 ...
随机推荐
- CDN上的缓存刷新、缓存预热是怎样的使用场景？
缓存刷新 源站内容更新后,希望用户可以获取到最新资源,CDN租户可以通过提交刷新请求将CDN节点上指定的缓存内容强制过期.当用户再次访问时,CDN节点将回源获取已更新内容返回给用户并在节点缓存最新资源 ...
- [UE4]制作缩略图
一.创建一个专门用来做缩略图的角色CameraCharacter,不需要实体模型. 二.Auto Possess Player设置为“Player 0” 三.重力比例改成0(这样在天上的时候就不会往下 ...
- AMQP & JMS对比（转载）
AMQP & JMS对比 原文地址:https://blog.csdn.net/hpttlook/article/details/23391967 初次接触消息队列时,在网上搜索,总是会提到如 ...
- Android接听、挂断电话
新建一个名为ITelephony的aidl文件,注意包名不能改变,因为是通过反射方式来实现接听和挂断的
- vue 绑定属性 绑定Class 绑定style
<template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...
- WebApi中关于base64和jwt的联合验证
用到了如鹏的代码 jwt验证 public class MyAuthoFilterPostOrgInfoAttribute: AuthorizationFilterAttribute { public ...
- 转]GSM模块信号强度CSQ与RSSI的对应关系
使用GSM或者3G模块时,都会接触到信号强度CSQ.通过指令AT+CSQ,模块返回当前的信号质量,例如: AT+CSQ +CSQ: 28,0 其中28就是信号强度CSQ,但它不是真实的CSQ,他应该叫 ...
- centos找不到vim命令
linux系统执行vim命令时,提示centos -bash : vim:command not found 这个时候需要检查vim编辑器是否安装: 输入rpm -qa|grep vim命令, ...
- SerializeHelper
using System; using System.Collections.Generic; using System.Configuration; using System.IO; using S ...
- 03 Linux的目录结构与常见文件管理
Linux目录结构 根文件系统rootfs用来实现整个文件的管理: 而Linux下的所有文件都需要通过根文件系统才能访问: FHS:Filesystem Hierarchy Standard文件层次化 ...