<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机短信验证码</title>
    <script src="jquery-2.1.4.js"></script>
</head>
<body>
    <div>
        <div style="vertical-align: middle">
            <input id="mobile" type="tel" name="mobile" placeholder="手机号码"/>
            <span style="text-align: center;">
                <button id="sendmsg">获取验证码</button>
            </span>
        </div>
    </div>
</body>
</html>
<script >

    var InterValObj; //timer变量，控制时间
    var count = 5; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    var code = ""; //验证码
    var codeLength = 6;//验证码长度

    $(function () {
        $('#sendmsg').click(function () {
            $.ajax({
                type: "post",
                // 手机短信验证码发送程序
                url: "sendCaptcha.php",
                data: "admin=" +"&mobile="+$("#mobile").val() ,
                success: function (result) {//通过返回值判断发送状态
                    // console.log(result);
                   if(result==0){
                       curCount = count;
                       //设置button效果，开始计时
                       $("#sendmsg").css("background-color", "LightSkyBlue");
                       $("#sendmsg").attr("disabled", "true");
                       $("#sendmsg").html("获取" + curCount + "秒");
                       InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                      // alert("验证码发送成功，请查收!");
                   }
                    if(result==1){

                        alert("手机号不匹配!");
                    }

                },
                error:function(result){
                    console.log('error');
                },
                dataType: 'json'

            })
        })
    })

    function SetRemainTime() {

        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#sendmsg").removeAttr("disabled");//启用按钮
            $("#sendmsg").css("background-color", "");
            $("#sendmsg").html("重发验证码");
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
        }
        else {
            curCount--;
            $("#sendmsg").html("获取" + curCount + "秒");
        }
    }
</script>

验证码60s倒计时前端效果的更多相关文章

  1. 6.短信验证码60s倒计时

    短信验证码60s倒计时 html: <input type="button"  class="btn btn-primary" value="免 ...

  2. 发送验证码60s倒计时实现

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

  3. js实现60s倒计时效果

    适用于获取验证码等其他场景,下面代码直接粘贴句可以使用 // 60s获取验证码的js与html var timer = null; var count = 60; $('.box>button' ...

  4. jquery 60s倒计时

    前端开发中经常用到的发送按钮倒计时,每次都是重写,挺麻烦的,记录一下,以后直接来复制代码 <!DOCTYPE html> <html> <head> <met ...

  5. React实战之60s倒计时按钮（发送短信验证按钮）

    React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormI ...

  6. 常用的几个CSS前端效果

    做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如bootstrap等,我们轻松的就就可以做出一些页面效果.但是掌握每一个常见效果的写法还是很重要的,下面整理出一些常见的CSS前端效果,让你更轻 ...

  7. React 60S倒计时

    React 60S倒计时 1.设置状态: 2.函数主体: 3.应用: 4..效果图:

  8. js验证码有效时间倒计时

    js验证码有效时间倒计时 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...

  9. 微信小程序验证码获取倒计时

    wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...

随机推荐

  1. dump函数

    一.函数标准格式: DUMP(expr[,return_fmt[,start_position][,length]]) 基本参数时4个,最少可以填的参数是0个.当完全没有参数时,直接返回null.另外 ...

  2. AtCoder ARC 090 E / AtCoder 3883: Avoiding Collision

    题目传送门:ARC090E. 题意简述: 给定一张有 \(N\) 个点 \(M\) 条边的无向图.每条边有相应的边权,边权是正整数. 小 A 要从结点 \(S\) 走到结点 \(T\) ,而小 B 则 ...

  3. go 函数的作用域及可见性

    1.全局变量,在程序整个生命周期有效 比如: test.go 中 我们定义 了 a 作为全局变量,那么在这个程序中任何地方都可以调用a, 这个 2. 局部变量,分为两种:1)函数内定义,2)语句块内定 ...

  4. CentOS安装ANT

    第1步:下载ant apache-ant-1.9.2-bin.tar.gz http://archive.apache.org/dist/ant/binaries/ 第2步:解压 tar -zxvf ...

  5. 数论-求n以内的质数

    一.埃拉托斯特尼筛法 名字很高大上,然而并没有什么卵用…… 思路: 在把<=√n的质数所有的<=n的倍数剔除,剩下的就都是质数了,很容易理解…… 复杂度O(nloglogn) #inclu ...

  6. Vim 编辑文件时，突然断开链接

    centos 系统 编辑文本 突然退出 ,恢复文档操作: 有道笔记链接地址

  7. 分享一个自己写的vue多语言插件smart-vue-i18n

    前言 目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压 ...

  8. centos7.2安装mysql5.7

    1.安装前工作 在安装前需要确定现在这个系统有没有 mysql,如果有那么必须卸载(在 centos7 自带的是 mariaDb 数据库,所以第一步是卸载数据库). 卸载系统自带的Mariadb: 查 ...

  9. Redux-DevTools 安装

    以下以Chrome为准. 首先,从Chrome Web Store(需要***支持)下载chrome 插件 Redux DevTools. 使用方式有两种: 一种只需在代码createStore中添加 ...

  10. CentOS6.9 安装OpenResty

    1.安装依赖包 yum install -y gcc gcc-c++ readline-devel pcre-devel openssl-devel tcl perl 2.安装OpenResty 首先 ...