jquery倒计时按钮常用于验证码倒计时
<!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) {
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倒计时按钮常用于验证码倒计时的更多相关文章
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- 基于jquery的-获取短信验证码-倒计时
在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: <input class="gain" type="button" ...
- jQuery获取短信验证码+倒计时实现
jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...
- jQuery实现发送短信验证码后60秒倒计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- iOS 短信验证码倒计时按钮的实现
验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...
- 前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...
- Flutter 实际开发常用工具类（全局提示，请求封装，token缓存，验证码倒计时、常用窗帘动画及布局）
介绍: 一星期从入门到实际开发经验分享及总结 代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...
- android学习小例子——验证码倒计时按钮
1.activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro ...
随机推荐
- <iframe width="250" height="250" src="http://www.baidu.com"></iframe>
<iframe width="250" height="250" src="http://www.baidu.com">< ...
- zabbix 邮件报警配置
zabbxi 邮件告警推送有两种方式: 1.使用zabbix服务端的本地邮箱账号发送,邮件名为:user@hostname.localdomain,user为发送邮件的用户,hostname为zabb ...
- 68.纯 CSS 创作一本色卡
原文地址:https://segmentfault.com/a/1190000015456554 感想:复习下 transform-origin: 位置; HTML code: <div cla ...
- Hive 特殊日期获取 tips
获取当前日期 SELECT CURRENT_DATE, CURRENT_TIMESTAMP, from_unixtime(unix_timestamp()); 上个月1号 concat(substr( ...
- 49.字符串转int
面360的时候这道题目加了一个要求就是要求小数输出整数,故增加一个关于小数点的判断 要注意转义字符:"."和"|"都是转义字符,必须得加"\\&quo ...
- chrome浏览器 新建 标签 页面 跳转到主页（或跳转到谷歌）
我的浏览器是跳转到自己设置的主页.我在贴吧看到的以下方式,然后就可以了: 地址栏输入 chrome://flags 搜索 Enable doodles on the local NTP 这一项改为di ...
- spark总结
算子总结 1.变换操作,包括过滤,变换,去重,排序,分区操作 filter过滤操作,无法触发重新分区 map,flatMap,flatMapValues,mapValues,mapPartitions ...
- 【STM32】临界区进入退出宏 OS_ENTER_CRITICAL() 和 OS_EXIT_CRITICAL()
宏函数展开为: #define OS_CRITICAL_METHOD 3 #if OS_CRITICAL_METHOD == 3 #define OS_ENTER_CRITICAL() {cpu_sr ...
- Oracle 11gR2 客户端windows 10安装后PL/SQL配置
操作系统:windows 10 软件:Oracle 11gR2 客户端 (64 bit) PLSQL Developer 13 (64 bit) 注意:PLSQL与oracle客户端版本要一致 1. ...
- js中this的绑定规则及优先级
一. this绑定规则 函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条. 1.1 默认绑定 看下面代码: function foo() { cons ...