<!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. BZOJ 1861: [Zjoi2006]Book 书架 splay

    1861: [Zjoi2006]Book 书架 Description 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书 ...

  2. Codeforces Round #369 (Div. 2) C. Coloring Trees DP

    C. Coloring Trees   ZS the Coder and Chris the Baboon has arrived at Udayland! They walked in the pa ...

  3. json方式的面向对象

    json方式只适合于一个对象. var p1 = { name:"香菇", sex :"女", dreamdu: { URL: "www.dreamd ...

  4. C语言字符串操作常用库函数

    C语言字符串操作常用库函数 *********************************************************************************** 函数 ...

  5. 在Windows下快速搭建SVN服务器 VisualSVN

    下载https://www.visualsvn.com/server/download/ 1.安装 安装SVN服务器: 安装的时候可以选择http协议还是https协议,http协议速度快一些,而ht ...

  6. 使用J2SE API读取Properties文件的六种方法

    1.使用java.util.Properties类的load()方法示例: InputStream in = lnew BufferedInputStream(new FileInputStream( ...

  7. Codeforces Round #354 (Div. 2)-A

    A. Nicholas and Permutation 题目链接:http://codeforces.com/contest/676/problem/A Nicholas has an array a ...

  8. CSS3实现动画

    CSS3实现一个简单的动画 可以改变任意多的样式任意多的次数,用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%. ...

  9. 三进制状压 HDOJ 3001 Travelling

    题目传送门 题意:从某个点出发,所有点都走过且最多走两次,问最小花费 分析:数据量这么小应该是状压题,旅行商TSP的变形.dp[st][i]表示状态st,在i点时的最小花费,用三进制状压.以后任意进制 ...

  10. fill_parent 和 match_parent区别

    之前一直没有区别好 fill_parent 和 match_parent, 其实,在 api 8 以后,两者的作用几乎一样,都是填充控件 在这里延伸到android 的版本变化导致方法的变化问题 我对 ...