<!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. 587A

    #include<iostream> #include<algorithm> #include<stdio.h> #include<stdlib.h> ...

  2. 去除android手机滚动条

    方法1:::-webkit-scrollbar{display: none;} 方法2:::-webkit-scrollbar{height:0; width:0:}

  3. psql-02基本语法

    客户端 数据库: 创建:createdb mydb; 删除: dropdb mydb; 连接: 连接: psql mydb; 断开连接: \q 查看当前版本: select version(); 直接 ...

  4. 解决eclipse报PermGen space内存溢出异常的问题

    异常问题如下所示: 1.点击Eclipse->Window->Preferences,如下所示: 2.点击Server->Runtime Environments,选择Apache ...

  5. HDU5737 : Differencia

    注意到$b$不变,考虑用归并树来维护这个$b$序列,对于每个节点有序地维护$b$,同时在归并的时候预处理出每个元素在左右儿子里的排名. 在归并树上额外维护区间内$a\geq b$的个数以及赋值标记. ...

  6. iOS Xcode behaviors个人常用Debug配置

  7. Wordcount on YARN 一个MapReduce示例

    Hadoop YARN版本:2.2.0 关于hadoop yarn的环境搭建可以参考这篇博文:Hadoop 2.0安装以及不停集群加datanode hadoop hdfs yarn伪分布式运行,有如 ...

  8. mark元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. UVALive6900 Road Repair（树的点分治）

    题目大概说一棵树,树边有费用和收益两个属性,求一条收益和最大的路径满足费用和不超过C. 树上任意两点的路径都可以看成是过某一个子树根的路径,显然树分治. 治的时候要解决的一个问题是,找到费用小于等于某 ...

  10. connect & express简介

    Node.js[5] connect & express简介 Node.js[4] 第一个模块 Node.js[3] 俯瞰API (整理中) Node.js[2] Hello Node Nod ...