前端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. HDU 4864Task(更多的联合培训学校1)(贪婪)

    职务地址:pid=4864">HDU4864 这题又是一上来觉得是最小费用流,可是边太多.果然,敲完交上去后不断TLE.. 小优化了两次也没过. . . sad.. 后来看了题解才发现 ...

  2. Sublime Text 3 搭建Go开发环境(Windows)

    一.安装GO 如果已经环境已经配置好,这一步省略.... 1.下载并安装go sdk 2.配置环境变量 (1). 新建 变量名:GOBIN 变量值 :F:\Go\bin (2). 新建 变量名:GOA ...

  3. Google免费的SVN服务器管理VS2010代码

    原文:Google免费的SVN服务器管理VS2010代码 前言 Google免费为我们提供了代码管理的SVN服务器.首先我这里用的Win7 64的电脑系统,用VS2010进行的代码开发.这里管理代码需 ...

  4. POJ 3126 Prime Path(BFS 数字处理)

    意甲冠军  给你两个4位质数a, b  每次你可以改变a个位数,但仍然需要素数的变化  乞讨a有多少次的能力,至少修改成b 基础的bfs  注意数的处理即可了  出队一个数  然后入队全部能够由这个素 ...

  5. EntityFramework6 用 PostgreSQL

    开篇 1.这是自己第一篇博客,希望能够坚持下去.. 2.可能技术比较初级,大神看不下的话,多鼓励.. 3.开发环境为 vs2013,.net framework 4.5; 开始 1.安装entityf ...

  6. ProgressDialog(三)——代号为中心的屏幕上显示ProgressDialog(ProgressBar)

    MainActivity如下面: package cc.testprogressdialog; import android.os.Bundle; import android.view.Gravit ...

  7. HDU 3788 和九度OJ 1006测试数据是不一样的

    ZOJ问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  8. iOS 生成随机颜色(UIColor)

    #import <UIKit/UIKit.h> @interface UIColor (RandomColor) +(UIColor *) randomColor; @end #impor ...

  9. 在.NET Fiddle有趣的沙盒代码

    在.NET Fiddle有趣的沙盒代码 笔者:Tony Patton | 托尼·巴顿译:PurpleEndurer,2014-11-18,第1版 C#和VB.NET开发者能够使用.NET Fiddle ...

  10. 解决SQL订阅过程中找不到已经创建的订阅

    原文:解决SQL订阅过程中找不到已经创建的订阅 之前有写过一篇博客,主要是图解SQL复制技术:图解SQL 2008数据库复制,当时的测试环境是在我本地同一个服务器上面,所以测试的时候可谓是一帆风顺,最 ...