jQuery实现发送验证码倒计时60秒
前端HMTL:
<div class="form_box">
<div class="line mb40">
<div class="item">手机验证码:</div>
<div class="cont">
<!--点击发送验证码后,倒计时class="count" style="block" -->
<p class="code">
<input type="text" value="" class="input_text">
<span class="info">
<em style="display: none" class="count">(60)秒后重新发送</em>
<a href="javascript:;" class="send" onclick="sendValidCode();">发送验证码</a>
</span>
</p>
</div>
</div>
<!--消息提示区域 -->
<div style="visibility: hidden; margin-left: 192px; height: 30px;" id="errorNotice">
</div>
<!--设置页面-->
<div class="line">
<div class="item"></div>
<div class="cont">
<input type="button" onclick="checkValidCode();" value="确 定" class="button01">
</div>
</div>
</div>
jQuery实现60秒倒计时:
//发送验证码
function sendValidCode(){
$('#errorNotice').html('');
$('.input_text').val(''); $.ajax({
type: 'post',
dataType: "json",
url: "/Ajax/PhoneAuthen.php",
data: {
ajaxMethod: "sendValidCodeNew",
mtype: "2"
},
success: function(data){
if (data.result > 0) { }
else {
$('#errorNotice').html('短信发送失败,请稍后重试!');
$('#errorNotice').css('visibility', 'visible');
}
},
error: function(data){
$('#errorNotice').html('短信发送失败,请稍后重试!');
$('#errorNotice').css('visibility', 'visible');
}
}); //60秒后重新发送
var btnSend = $(".send");
var msg = $('.count');
btnSend.removeAttr('style').attr('style', 'display:none;');
msg.removeAttr('style').attr('style', 'display:block');
var left_time = 60;
var tt = window.setInterval(function(){
left_time = left_time - 1;
if (left_time <= 0) {
window.clearInterval(tt);
msg.html('(60)秒后重新发送');
msg.removeAttr('style').attr('style', 'display:none;');
btnSend.removeAttr('style').attr('style', 'display:block');
}
else {
msg.html('(' + left_time + ')秒后重新发送');
}
}, 1000);
}
备注:
visibility:hidden/visible 设置为隐藏/显示(始终占位)
display:不占位
jQuery实现发送验证码倒计时60秒的更多相关文章
- js 验证码 倒计时60秒
js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...
- vue实现验证码倒计时60秒的具体代码
vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...
- jQuery手机发送验证码倒计时代码
<!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type=&q ...
- javaScript 验证码 倒计时60秒
<input type="button" id="btn" value="免费获取验证码" /> <script type ...
- iOS-登录发送验证码时60秒倒计时,直接用
__block NSInteger timeout= ; //倒计时时间 KWeakSelf dispatch_queue_t queue = dispatch_get_global_queue(DI ...
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- jQuery实现发送短信验证码后60秒倒计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- Jquery插件实现点击获取验证码后60秒内禁止重新获取
通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...
- js实现倒计时60秒的简单代码
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
随机推荐
- 【原创】构建高性能ASP.NET站点之二 优化HTTP请求(前端)
原文:[原创]构建高性能ASP.NET站点之二 优化HTTP请求(前端) 构建高性能ASP.NET站点之二 优化HTTP请求(前端) 前言: 这段时间比较的忙,文章写不是很勤,希望大家谅解. 上一篇文 ...
- SQLSERVER中的log block校验(译)
原文:SQLSERVER中的log block校验(译) SQLSERVER中的log block校验(译) 来自:http://sankarreddy.com/2010/03/transaction ...
- 【PLSQL】变量声明,结构语句,cursor游标
************************************************************************ ****原文:blog.csdn.net/clar ...
- Ext,保存输入记录,并会提示输入
Ext的ComboBox组件使用非常多,通过配置输入框可以被允许成为一个.并可以存储输入记录,记录提示的基础,然后进行再次进入,以提高的用户体验输入操作. 代码非常easy,基本操作,如以下: // ...
- 完美世界3D格斗手游[格斗宝贝]今日公測
狗刨学习网报道 / 经过近两年井喷式的发展,国内手游市场洗牌的信号愈加强烈.用户体验的提升.以及对产品核心品质的要求.促进了手游的精品化.而白热化的市场竞争,也催生了各大厂商在细分市场的抢滩.当中.更 ...
- DOM简要
在看Js视频的时候就感觉Dom这东西太奇妙了.在这个注重用户体验的Web设计时代里.Dom是至关重要的. 它的易用性强.而且遍历简单.支持XPath. 它既然这么强大那么就来简单的介绍Dom这个东东. ...
- 使用一个T-SQL语句批量查询数据表占用空间及其行数
原文:使用一个T-SQL语句批量查询数据表占用空间及其行数 要找到数据库中数据表占用的空间和存在的行数.可以使用sp_spaceused搭配数据表的名称.就可以产生该表耗用的空间和现有行数. 如: U ...
- POJ 3237 Tree (树链拆分)
主题链接~~> 做题情绪:了. 解题思路: 主要注意如何区间更新就ok了 . 树链剖分就是树上的线段树. 代码: #include<iostream> #include<sst ...
- 备注ocp_ORACLE专题网络
声明:原创作品,出自 "深蓝的blog" 博客.欢迎转载.转载时请务必注明出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanl ...
- javascript中间preventDefault与stopPropagation角色介绍
preventDefault的作用是什么方法,它? 我们知道,例如,<a href="http://www.baidu.com">百度</a>,这是html ...