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%;width: 100%;height: 40px;" value="获取验证码"/>

<button id="btnDownload" style="color: #FFFFFF;border:0 solid #ccc;margin-top: 5%;width: 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("短信验证码发送失败");
            }
        });
    });
时间: 2024-10-27 13:25:40

Jquery点击发送按钮后,按钮文本倒计时的相关文章

点击发送短信按钮跳转到手机短信界面实现发送短信

新建一个singleView代码如下: #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad {     [super viewDidLoad];     NSLog(@"%@",NSHomeDirectory());     UIButton *button = [UIButton buttonW

Jquery实现点击文字后变成文本框,修改发送后台保存

本文实现以下几个功能: 1.点击文字变为文本框 ,并选中文字2.对文本框内容进行修改3.点击文本框以外的地方文本框再次变为修改后的文字,如果是删除文字,显示默认提示文字4. 同步更新SQL数据库内容 首先是HTML模板部分: 1 <{if !empty($img_list)}> 2 <{foreach $img_list as $kk=>$vv}> 3 <div class="item-box radius3"> 4 <a href=&q

使用Jquery实现点击文字后变成文本框且可修改

1 $(function() { 2 //获取class为caname的元素 3 $(".caname").click(function() { 4 var td = $(this); 5 var txt = td.text(); 6 var input = $("<input type='text'value='" + txt + "'/>"); 7 td.html(input); 8 input.click(function()

Jquery实现点击文字后变成文本框且可修改

$(function() { //获取class为caname的元素 $(".caname").click(function() { var td = $(this); var txt = td.text(); var input = $("<input type='text'value='" + txt + "'/>"); td.html(input); input.click(function() { return false;

jquery实现&lt;body&gt;中点击按钮后,在&lt;tbody&gt;中显示一连串文本框

HTML中的代码如下: 1 <div style="background:#fff;border-style:solid; border-width:1px 1px 0 1px;border-color:#B8D0D6;"> 2 <div > 3 <div style="margin:-6px 0 0 0"> 4 <button class="button gray" type="button&

jQuery Mobile的学习时间botton按钮的事件学习

程序员都很懒,你懂的! 生命的绝唱来机只争朝夕,如诗的年华更需惜时如金.不要让今天的懈怠成为一生的痛. 每天都在进步.最近在学习jquery mobile开发,使用的button,绑定事件,和大家一起学习,一起分享! 直接上代码: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.m

cocos2d-x:解决点击拖动按钮后,所在的layer监听不到触摸事件的问题

点击拖动按钮后,想让所在的layer监听到屏幕的触摸事件,可以把该按钮拖动开始的时候设置setTouchEnabled为false;例: #include "ui/UIButton.h" bool myDemo::init() { // 设置点击事件 EventListenerTouchOneByOne *listener = EventListenerTouchOneByOne::create(); listener->onTouchBegan = CC_CALLBACK_2(

普通选项卡+自动播放功能+向前/向后按钮 原生js

今天做了幻灯片,主要功能包括:普通选项卡,向前/向后播放按钮,向前?向后播放功能,自动播放功能 要实现简单选项卡功能是没有问题的,但是添加功能就出现各种各样的问题了 遇到的问题:1 下标问题 2普通选项卡与向前/向后功能结合的时候冲突,可以向前/向后播放,但是再想实现普通选项卡就出问题了3 添加向前/向后按钮后,html布局下移4 添加向前/向后按钮的时候,我用img标签,显然这个不适用,不能很好的调节垂直居中5 当鼠标放在向前/向后按钮上的时候,闪烁,点击的时候也闪烁,而且还点击失效 解决方法

【翻译自mos文章】当点击完 finish按钮后,dbca 或者dbua hang住

当点击完 finish按钮后,dbca 或者dbua hang住 来源于: DBCA/DBUA APPEARS TO HANG AFTER CLICKING FINISH BUTTON (文档 ID 727290.1) 适用于: Oracle Database Configuration Assistant - Version 10.2.0.1 to 11.2.0.1 [Release 10.2 to 11.2] Information in this document applies to a