博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个短信验证码倒计时插件
阅读量:6657 次
发布时间:2019-06-25

本文共 2445 字,大约阅读时间需要 8 分钟。

这个插件是大概是今年9月份写的了,当时项目很赶,没怎么优化,这次项目改版又要用到,在代码库里看到后顺便贴在博客上,刷刷存在感。这个插件很简单,新手可参考之前的一篇文章: ,本插件没提供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,就这样。

 

转载于:https://www.cnblogs.com/chayangge/p/5044818.html

你可能感兴趣的文章
「每天一道面试题」JVM垃圾回收算法有哪几些?
查看>>
猫眼今日在香港公开招股 定价区间14.8港元至20.4港元
查看>>
“熊孩子”连续脚踢乘客遭背摔暴打,面对熊孩子我们应该怎么做
查看>>
从单机到2000万QPS:知乎Redis平台发展与演进之路
查看>>
design pattens - adapter
查看>>
百度首次将强化学习写入财报,不只是因为它能让你多看广告
查看>>
HTML5中手势原理分析与数学知识的实践
查看>>
[译] 用 CSS 选择器和自定义属性来升级你的项目
查看>>
Zepto源码学习Event模块
查看>>
Android fragment 标签加载过程分析
查看>>
LeetCode40.组合总和|| JavaScript
查看>>
JavaScript深拷贝、浅拷贝
查看>>
[]为false,!![]为true,[true] == 'true'为true,傻傻分不清
查看>>
【译】Gradle 的依赖关系处理不当,可能导致你编译异常
查看>>
[译]无脚本的脚本:比特币如何支持没有智能合约的智能合约
查看>>
最全阿里技术P系列解读:P5-P8的技能要求和薪资结构
查看>>
老司机带你检测相似图片
查看>>
逆向基础(十三) JAVA (一)
查看>>
深入分析 Fiesta Exploit Kit
查看>>
IQKeyboard导航栏上移和键盘遮盖textfield的问题
查看>>