<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery倒计时按钮常用于验证码倒计时</title>
</head>
<body style="padding:50px;">
<h1>

jquery倒计时按钮常用于验证码倒计时演示</h1>
<h3>使用演示 显示为 秒</h3>
<p style="margin-bottom: 40px;">
<button type="button" id="test1">获取验证码</button>
<button type="button" id="test1-clear">清理验证码</button>
</p>
<h3>使用演示 显示为 分:秒</h3>
<p style="margin-bottom: 40px;">
<button type="button" id="test2">获取验证码</button>
</p>
<h3>使用演示 显示为 天:时:分:秒</h3>
<p style="margin-bottom: 40px;">
<button type="button" id="test3">获取验证码</button>
</p>
<h3>使用演示 显示为 天:时:分:秒</h3>
<p style="margin-bottom: 40px;">
<button type="button" id="test4">获取验证码</button>
</p>

<script src="http://XXX/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
<script>

//jquery倒计时按钮常用于验证码倒计
function buttonCountdown($el, msNum, timeFormat) {
var text = $el.data("text") || $el.text(),
timer = 0;
$el.prop("disabled", true).addClass("disabled")
.on("bc.clear", function () {
clearTime();
});

(function countdown() {
var time = showTime(msNum)[timeFormat];
$el.text(time + '后失效');
if (msNum <= 0) {
msNum = 0;
clearTime();
} else {
msNum -= 1000;
timer = setTimeout(arguments.callee, 1000);
}
})();

function clearTime() {
clearTimeout(timer);
$el.prop("disabled", false).removeClass("disabled").text(text);
}

function showTime(ms) {

var

d = Math.floor(ms / 1000 / 60 / 60 / 24),
h = Math.floor(ms / 1000 / 60 / 60 % 24),

m = Math.floor(ms / 1000 / 60 % 60),
s = Math.floor(ms / 1000 % 60),
ss = Math.floor(ms / 1000);

return {
d: d + "天",
h: h + "小时",
m: m + "分",
ss: ss + "秒",
"d:h:m:s": d + "天" + h + "小时" + m + "分" + s + "秒",
"h:m:s": h + "小时" + m + "分" + s + "秒",
"m:s": m + "分" + s + "秒"
};
}

return this;
}

//使用演示 显示为 秒
$("#test1").on("click",function(){
buttonCountdown($(this), 1000 * 60 * 3, "ss");
});

//使用演示 显示为 分:秒
$("#test2").on("click",function(){
buttonCountdown($(this), 1000 * 60 * 3, "m:s");
});

//使用演示 显示为 时:分:秒
$("#test3").on("click",function(){
buttonCountdown($(this), 1000 * 60 * 3, "h:m:s");
});

//使用演示 显示为 天:时:分:秒
$("#test4").on("click",function(){
buttonCountdown($(this), 1000 * 60 * 3, "d:h:m:s");
});

//清理$("#test1")的倒计时 比如请求出错或者什么原因要清理倒计时按钮
$("#test1-clear").on("click",function(){
$("#test1").trigger("bc.clear");
});
</script>
</body>
</html>

jquery倒计时按钮常用于验证码倒计时的更多相关文章

  1. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  2. 基于jquery的-获取短信验证码-倒计时

    在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: <input class="gain" type="button" ...

  3. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  4. jQuery实现发送短信验证码后60秒倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  5. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  6. 前端学习——ionic/AngularJs——获取验证码倒计时按钮

     按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...

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

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

  8. Flutter 实际开发常用工具类（全局提示，请求封装，token缓存，验证码倒计时、常用窗帘动画及布局）

    介绍: 一星期从入门到实际开发经验分享及总结           代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...

  9. android学习小例子——验证码倒计时按钮

    1.activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

随机推荐

  1. Linux下Docker快速部署LAMP

    文章目录 拿来即用 获取LAMP LAMP版本 icoty1/lamp:v1.1.0制作过程 获取ubuntu基础镜像 安装依赖 mysql apache/php phpmyadmin 使apache ...

  2. 关于 someone could be eavesdropping on you right now (man-in-the-middle attack) ssh的解决办法

    记录工作中遇到的问题 someone could be eavesdropping on you right now (man-in-the-middle attack) ssh 由于远程机器或者重组 ...

  3. python 匿名函数&内置函数

    匿名函数:为了解决那些功能很简单的需求而设计的一句话函数怎么定义匿名函数: cal = lambda x : x*x # cal是函数名,lambda是定义匿名函数的关键字 冒号前面的额x是参数即函数 ...

  4. tornado架构分析3 options.py中基础类_Option

    1 数据清洗 option里面最重要的方法就是parse,在这里,parse函数的一开始就调用了后面的子函数_parse_datetime,_parse_timedelta,_parse_bool,_ ...

  5. Python 的赋值坑 ， a=b=c=1???

    原文地址:https://www.v2ex.com/amp/t/443384 Python 的赋值坑 , a=b=c=1??? 今天回答了一个主题, 一不小心进入了一个坑, 耗费了好多时间终于弄懂了我 ...

  6. 使用 nodeJs 开发微信公众号（获取access_token）

    要使用微信提供的功能接口,就需要获取到access_token,这是开发公众号必不可少的一部 access_token有效期20分钟,建议保存起来,过期后在重新获取 获取流程如下: 我将微信相关的操作 ...

  7. Django Cookie和Seesion

    1.cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生.cookie的工作原理是:由服务器产生内容,浏览器 ...

  8. Spring 整合WebSocket, Error during WebSocket handshake: Unexpected response code: 302 还有200的错误

    springboot 集成websocket 及其简单,,,但是管理端使用的是Spring,原生配置,发生这个错误,,,302 被重定向了...我起的是本地locallhost,把ip换成 local ...

  9. 读取文件不是真实的具体路径 setZh.ini

    读取 c:\windows\Syswow64\XX\XX.ini 时内容不正确. 发现真实文件为: C:\Users\用户名\AppData\Local\VirtualStore\Windows\Sy ...

  10. hadoop更改保存路径后,批量重启不能启动datanode（或者format以后不能启动datanode）

    这是因为更改文件后,所有的子节点的core-site.xml并没有一致,所以使用start-dfs.sh的时候导致机器起不起来. 修改slave(datanode)节点的core-site.xml就可 ...