<!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. 封装自己的printf函数

    #include <stdio.h> #include <stdarg.h> //方式一 #define DBG_PRINT (printf("%s:%u %s:%s ...

  2. loj 1167(二分+最大流）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26881 思路:我们可以二分最大危险度,然后建图,由于每个休息点只能 ...

  3. 德飞莱STM32单片机学习（一）——下载环境搭建

    一.下载驱动安装. 1.手动打开CH341 文件夹(驱动程序文件夹内) ,双击安装驱动 2. 尼莫M3S 开发硬件设置 硬件需要做到以下2 点:1. USB插入USB1(COM),打开电源开关J14( ...

  4. supervisor(三)xml_rpc

    supervisor提供的两种管理方式,supervisorctl和web其实都是通过xml_rpc来实现的. xml_rpc其实就是本地可以去调用远端的函数方法,然后函数方法经过一番处理后,把结果返 ...

  5. asp.net权限控制配置web.config

    项目下 有三个文件夹 A,B,C 验正方式是 Forms 验正 我要设置他们的访问权限为, A,匿名可访问 B,普通用户授权后才能访问 C,只允许管理员访问 <configuration> ...

  6. ArrayList和LinkedList的几种循环遍历方式及性能对比分析

    最新最准确内容建议直接访问原文:ArrayList和LinkedList的几种循环遍历方式及性能对比分析 主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性 ...

  7. Android拓展系列(11)--打造Windows下便携的Android源码阅读环境

    因为EXT和NTFS格式的差异,我一直对于windows下阅读Android源码感到不满. 前几天,想把最新的android5.0的源码下下来研究一下,而平时日常使用的又是windows环境,于是专门 ...

  8. loopback 05

    数据并发处理 数据库事务 事务隔离 ACID性质 原子性(Atomicity): 要么全部被执行,要么都不执行; 一致性(Consistency): 满足完整性约束; 隔离性(Isolation): ...

  9. express－17 持久化

    简介 所有网站和Web应用程序(除了最简单的)都需要某种持久化方式,即某种比易失性内存更持久的数据存储方式,这样当遇到服务器宕机.断电.升级和迁移等情况时数据才能保存下来. 文件系统持久化 实现持久化 ...

  10. wpf,CollectionViewSource，使用数据过滤 筛选 功能。

    class TextListBoxVMpublic : ViewModelBase { public TextListBoxVMpublic() { var list = this.GetEmploy ...