<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>

　　 <input id="mobile" type="text" value="" />
        <input id="sendMess" type="button" value="发送验证码" /></p>
</body>
</html>

<script type="text/javascript">

var messcode;
var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数

$(function(){

$("#sendMess").click ( function () {
        var mobile=$("#mobile").val();
        if(""!=$.trim(mobile)){
            curCount = count;
            $("#sendMess").attr("disabled","true");
            $("#sendMess").val("请在" + curCount + "秒内输入验证码");
             InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
           /*   $.ajax({
                type: "POST",
                url: "/Test/sendMess",
                data:{mobile:mobile},
                success: function(mess) {
                　　alert(mess);
                }
            });*/
        }else{
            alert("请输入手机号！")
        }

});

});

//timer处理函数
    function SetRemainTime() {
           if (curCount == 0) {                
                window.clearInterval(InterValObj);//停止计时器
                    $("#sendMess").removeAttr("disabled");//启用按钮
                    $("#sendMess").val("重新发送验证码");
                }
                else {
                    curCount--;
                    $("#sendMess").val("请在" + curCount + "秒内输入验证码");
                }
           }
</script>

jquery实现获取手机验证码倒计时效果的更多相关文章

  1. js获取手机验证码倒计时的实现

    方案一 <div class="div user-input"> <input type="number" class="code& ...

  2. 【jQuery】手机验证码倒计时效果

    <ul class="ulist"> <li class="group"> <label class="label&qu ...

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

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

  4. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  5. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  6. vue 项目,获取手机验证码和图形验证码(iviewUI框架)

    1.编辑获取验证码模块 <Form ref="phoneFormItem" :model="phoneFormItem" :label-width=&qu ...

  7. 微信小程序获取手机验证码

    一种比较常见的功能获取手机验证码 先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题 直接上代码吧: wxml页面: <view class='changeI ...

  8. C#获取手机验证码+榛子云平台

    今天给大家推荐一个简单的获取手机验证码注册+获取随机4位数 测试框架:.net4.7以上 1.榛子云注册:http://smsow.zhenzikj.com/,送一条测试短信,最低充10元即刻使用 2 ...

  9. Android Studio使用Mob来获取手机验证码加上倒计时

    再根据上编的基础上再添加倒计时即可 添加一个类TimeCountUtil package zhu.com.yzm4; import android.os.CountDownTimer; import ...

随机推荐

  1. OpenCv for Android

    Android开发:安装NDK,移植OpenCV2.3.1,JNI调用OpenCV全过程http://blog.csdn.net/yanzi1225627/article/details/852572 ...

  2. em与rem

    em是相对于父元素的font-size,rem是相对于根元素的font-size. rem的补充: ① 对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明.这些浏览器会忽略用rem设定 ...

  3. Liferay 6.2 改造系列之二十三：修改Liferay原始主题中"技术支持:Liferay"字样

    1.修改主题模板文件,具体位置如下 (1) portal-master\portal-web\docroot\html\themes\_unstyled\templates\portal_normal ...

  4. SpringJMS解析3-监听器

    消息监听器容器是一个用于查看JMS目标等待消息到达的特殊bean,一旦消息到达它就可以获取到消息,并通过调用onMessage()方法将消息传递给一个MessageListener实现.Spring中 ...

  5. Python入门之树莓派

    Linux命令行$+命令 pwd显示当前目录 ls列表 cd改变当前目录,/ sudo超级用户输入,特权来操作系统相关设置或删除文件 sudo apt-get  install  安装程序 sudo ...

  6. jade学习02

    模版继承 ; block,extends ;如果是原生html文件的话,后缀html //layout.jade doctype html html head meat(charset='utf-8' ...

  7. iOS10 UI教程管理层次结构

    iOS10 UI教程管理层次结构 iOS10 UI教程管理层次结构,在一个应用程序中,如果存在多个层次结构,就需要对这些层次结构进行管理.在UIView类中提供了可以用来管理层次结构的方法,让开发者可 ...

  8. Swift3.0语言教程字符串大小写转化

    Swift3.0语言教程字符串大小写转化 Swift3.0语言教程字符串大小写转化,在字符串中,字符串的格式是很重要的,例如首字母大写,全部大写以及全部小写等.当字符串中字符很多时,通过人为一个一个的 ...

  9. 伪Acmer的推理(dfs/bfs)

    时间限制:1000MS  内存限制:65535K 提交次数:12 通过次数:9 收入:32 题型: 编程题   语言: C++;C Description 现在正是期末,在复习离散数学的Acmer遇到 ...

  10. 读取接口XML和批量导入数据SqlBulkCopy

    首先是C#处理xml文档 string urlStr = string.Format("http://……?timeBeg={0}&timeEnd={1}", timeBe ...