zoukankan      html  css  js  c++  java
  • 一个短信验证码倒计时插件

    这个插件是大概是今年9月份写的了,当时项目很赶,没怎么优化,这次项目改版又要用到,在代码库里看到后顺便贴在博客上,刷刷存在感。这个插件很简单,新手可参考之前的一篇文章:编写jquery常用插件的基本格式 ,本插件没提供css样式,需要使用的朋友根据实际情况改改就好,希望对你们有所帮助。

    ;(function($){  
        $.fn.extend({
            "Timing" : function(time,url,data){
                var newopts = { 
                    time:time,
                    url:url, //读取不同的验证接口,如:注册,密码找回,绑定手机等。。。。
                    data:data
                };
                var defaults = {
                    time:60  //默认倒计时60秒
                };
                //传参取代默认时间
                var option = $.extend({},defaults,newopts);
                var _this = $(this);
                _this.on("click",send);
                //ajax
                function send() {
                    if( mobileBox.isValid() ){ // 此处判断手机格式是否通过验证,请根据实际情况更改,可删除
                        _this.html("正在发送");
                        option.data.mobile = mobileBox.val();
                        $.ajax({
                            type: "POST",
                            url: option.url,
                            dataType:"json",
                            data:option.data,
                            success: function(msg) {
                                if (msg.code !== 200) {
                                    
                                    _this.html("发送验证码");
                                    util.alertOnEl(msg.data.message, _this,{
                                        autoClose:true
                                    });
                                    return;
                                }
                                _this.unbind("click"); //很重要,点击后取消点击事件,防止多次点击验证
                                var startTime = option.time; //一下是逻辑代码,点击后切换倒计时按钮样式
                                _this.html(startTime+"s重新发送").removeClass("send-validate").addClass("send-timing");
                                var timer = setInterval(function(){
                                    _this.html(--startTime+"s重新发送");
                                    if(startTime <= 0){
                                        clearInterval(timer);
                                        _this.html("重新发送").on("click",send).removeClass().addClass("send-validate");  
                                    }
                                },1000);                  
                            },
                            error:function(XMLHttpRequest, textStatus, errorThrown){
                                console.log(XMLHttpRequest);
                            }
                        });
                    }
                }
                return this; //保持链式
            }
        });
    })(jQuery)
    

      OK,就这样。

  • 相关阅读:
    离线存储
    创业公司 加入
    console 代理
    HTTP 协议中 Vary 的一些研究
    reactNative 的一些学习
    srcset 图片自适应
    一些不错的文章分享
    前端网站大全
    c# 捕捉键盘按键
    SQL 中With as 的用法
  • 原文地址:https://www.cnblogs.com/chayangge/p/5044818.html
Copyright © 2011-2022 走看看