zoukankan      html  css  js  c++  java
  • Jquery点击发送按钮后,按钮文本倒计时

    1.html代码

    <input type="number" id="mobileNo" placeholder="请输入手机号" />
    <input type="button" id="btnGetCode" style="background-color:#68BE02;color: #FFFFFF;border:0 solid #ccc;margin-bottom: 5%; 100%;height: 40px;" value="获取验证码"/>

    <button id="btnDownload" style="color: #FFFFFF;border:0 solid #ccc;margin-top: 5%; 100%;height: 40px;">确认下载</button>

    2.JS代码

    function change_state(status) {
                var btnGetCode = $('#btnGetCode');
                var sending = "发送中...";
                var sent = "重新获取";
                var ticks = 60;
                var tick=function () {
                    if (ticks > 0) {
                        setTimeout(function() {
                            btnGetCode.val(sent + "(" + ticks + ")");
                            ticks--;
                            tick();
                        }, 1000);
                    } else {
                        change_state('retry');
                    }
                };
                ticks = 60;
                switch (status) {
                    case "sending":
                        {
                            $("#btnGetCode").attr("disabled",true);
                            btnGetCode.val(sending);
                            break;
                        }
                    case "tick":
                        {
                            $("#btnGetCode").attr("disabled",true);
                            tick(sent);
                            break;
                        }
                    case "retry":
                        {
                            $("#btnGetCode").attr("disabled",false);
                            btnGetCode.val(sent);
                            break;
                        }
                }
            };

    3.方法调用

     $("#btnGetCode").click(function(){
            
            change_state('sending');
            var mobileNumber = $("#mobileNo").val();
            $.ajax({
                url: "/Share/SendVerfCode",
                type: "post",
                data: { mobileNo: mobileNumber },
                async: true,
                success: function (result) {
                    alert(result.msg);
                    if(result.state){
                        change_state("tick");
                    }else{
                        change_state("retry");
                    }
                },
                error: function () {
                    alert("短信验证码发送失败");
                }
            });
        });
  • 相关阅读:
    gulp通过http-proxy-middleware开启反向代理,实现跨域
    一些我常用的css 或者 js
    四舍五入
    生成 SSH 公钥
    对象转为数组 用lodash
    廖雪峰的官方网站
    window对象
    字符串
    简单得日期
    LeetCode 113. Path Sum II 20170705 部分之前做了没写的题目
  • 原文地址:https://www.cnblogs.com/CeleryCabbage/p/5411738.html
Copyright © 2011-2022 走看看