前端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秒的更多相关文章

  1. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  2. vue实现验证码倒计时60秒的具体代码

    vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...

  3. jQuery手机发送验证码倒计时代码

    <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type=&q ...

  4. javaScript 验证码 倒计时60秒

    <input type="button" id="btn" value="免费获取验证码" /> <script type ...

  5. iOS-登录发送验证码时60秒倒计时,直接用

    __block NSInteger timeout= ; //倒计时时间 KWeakSelf dispatch_queue_t queue = dispatch_get_global_queue(DI ...

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

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

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

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

  8. Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...

  9. js实现倒计时60秒的简单代码

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

随机推荐

  1. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  2. FreeBSD包管理

    FreeBSD软件没有安装Ubuntu的apt-get.它也不是Gentoo的portage.有三种方式: package ports 自主进行源代码编译安装 这里简介前两种. FreeBSD 6.0 ...

  3. head first c&lt;11&gt;在根据网络编程

    博文可以在一个大的网络通信实现,但是,一个人只能起到,我们能够给每个clientfork()子进程,实现诸多的服务. 方法: client连到server以后,server启动一个新创建的套接字对话. ...

  4. 使用EasyUI实现加入和删除功能

    增删该查是不论什么一个项目都少不了的功能操作.这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能. 首先.导入EasyUI的js代码: <link href="~/Easy ...

  5. JS列

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvU2h1aVRpYW5OYWlMdW8=/font/5a6L5L2T/fontsize/400/fill/I0 ...

  6. 朝花夕拾-4-shell

    引言 shell,我们常常会用到,以其强大的功能,会帮助我们解决非常多棘手的问题.近期遇到一个问题,要跑非常多case,假设串行的执行,须要非常久.能不能让他们并行起来,但又不能全部case都并行执行 ...

  7. android CheckBox RadioButton 照片和文字的间距问题

    利用自身的定义CheckBox 要么RadioButton时间.定义自己的图标和文字在不同的手机显示不同的音高.有时不太好控制,下面是我自己的定义CheckBox: 在Layout在下面xml: &l ...

  8. 采用shell脚本统计代码的行数

    刚毕业那会儿有一次去台湾公司面试,我问多行代码怎么写.我从来没有想过这个问题,粗略计算,.惊叹:大概几十万行不行. 最近整理资料,看着eclipse左边全面上市,我觉得这个东西.代码共同拥有的行倒底总 ...

  9. hdu4758 Walk Through Squares 自动机+DP

    题意:给n*m的地图,在地图的点上走,(n+1)*(m+1)个点,两种操作:往下走D和往右走R.现在要从左上角走到右下角,给定两个操作串,问包含这两个串的走法总共有多少种. 做法:用这两个串构建自动机 ...

  10. 可视化配置以及Net应用MemCache在win7

    MemCache在win7上的可视化配置以及Net应用   惯例科普:MemCache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发,但目前被许多网站使用以 ...