前端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. Struts2 拦截器—拦截action

    对于拦截器的基本使用这里我就懒得打字了,我这里就讲下如何用 Struts2 拦截器 拦截action.这是我个人的想法,如果有什么不对的,或者你们有什么更好的方法.请多多留言! 拦截器的默认拦截的方法 ...

  2. Java中finally你知多少

    首先来问大家一个问题:finally 语句块一定会执行吗? 很多人都认为 finally 语句块是肯定要执行的,其中也包括一些很有经验的 Java 程序员.可惜并不像大多人所认为的那样,对于这个问题, ...

  3. 12本最优秀的Android开发电子书强力推荐

    如今已经是手机互联网时代,手机应用越来越普及.Android作为基本的手机操作系统.吸引了众多开发人员開始为Android系统开发应用. 假设你正在开发或者准备进行Android的开发,我们今天推荐的 ...

  4. Java拾遗(一):浅析Java子类和父类的实例化顺序 及 陷阱

    本文主要介绍Java里经常使用的子类和父类的变量实例化顺序及陷阱,并结合一个Android实例来探讨此问题.日后编程中应尽量避免此陷阱. 首先看以下一段代码: 定义一个虚类Server.java pa ...

  5. Nginx搭建反向代理服务器过程详解(转)

    一.反向代理 我们都知道,80端口是web服务的默认端口,其他主机访问web服务器也是默认和80端口进行web交互,而一台服务器也只有一个80端口,这是约定俗成的标准. 我们来看下面两个场景: 1.服 ...

  6. Android学习之RecyclerView

    RecyclerView是android-support-v7-21版本号中新增的一个Widget,官方介绍RecyclerView 是 ListView 的升级版本号,更加先进和灵活. 开发环境 - ...

  7. HDU——B-number(数字DP)

    标题效果: 要了解1至n如何号码之间有许多含有13,并13可分 记忆化搜索: dp[pos][pre][mod][statu],pos位数,pre前一位,mod余数,statu状态 有2个状态:含13 ...

  8. JAVA网络编程-----TCP沟通

    java采纳TCP变速箱使用Socket和ServerSocket数据传输. 采纳tcp步模式数据传输: 1.设定client和服务器 ,分别对应Socket和ServerSocket 2.建立连接后 ...

  9. linux 字符界面浏览器 w3m(转)

    最近找到了几个linux终端下使用的浏览器,主要用来测试本机web服务器是否搭建成功.因为我们一般是用ssh客户端连接linux的,所以很需要一个字符界面的浏览器.找了几个显示都不理想,只有w3m用起 ...

  10. 获得span里面价值(在特殊情况下 )

    如何获得A? <div class="warpper"> <span class="content"> A <span>12 ...