jq-发送短信倒计时插件

最新推荐文章于 2024-07-20 21:16:51 发布

pingmin_1001

最新推荐文章于 2024-07-20 21:16:51 发布

阅读量94

点赞数

分类专栏： # jquery 文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/pinhmin/article/details/129008613

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该代码段展示了如何使用JavaScript实现短信验证码的发送功能，包括通过AJAX请求获取验证码，成功后启动倒计时以及重新发送的逻辑。当用户点击按钮后，会检查手机号格式，然后发送请求到指定接口，如果请求成功则启动60秒的倒计时，否则显示错误信息。

摘要由CSDN通过智能技术生成

短信验证码初始化

$.getScript('javascript/pages/send_msg_code.js', function() {
        /**checkMsgCodeBtn为发送验证码上的id*/
        $("#checkMsgCodeBtn").sendMsgCodeFun({
          url:'json/ct_act_volunteer_detail.json'/*验证码获取接口地址*/
        });
      });

发送短信组件

$.fn.sendMsgCodeFun=function(options){
  var defaults={
    phoneId:'telPhone', /**手机号输入框上的id*/
    count:60,
    url:'',
    callback:null,
    params:{}
  },
  opts=$.extend(defaults,options);
  var _self=$(this);
  var timer,curCount;
  $(this).on('tap',function(){
    if(!checkForm.checkPhone(opts.phoneId,true)) {
      return;
    }else{
      if (!_self.hasClass("disabled")) {
        $.ajax({
          type:"POST",
          url:opts.url,
          data:{telphone:$("#"+opts.phoneId).val()},
          dataType:"json",
          success:function(data){
            if (data.status=='1') {//成功
              sendMessage();
              } else { //失败
                alert(data.msg);
              }
          },
          error:function() {
            alert('验证码获取失败，请重新获取！');
          }
        });
      };
    };
  });
  var sendMessage=function() {
    curCount = opts.count;
    _self.addClass("disabled");
    _self.html("重新获取(" + curCount + ")");
    timer = window.setInterval(SetRemainTime, 1000);
  }
  var SetRemainTime=function() {
    if (curCount == 0) {
      window.clearInterval(timer);
      _self.removeClass("disabled");
      _self.html("重新发送");
    } else {
      curCount--;
      _self.html("重新获取(" + curCount + ")");
    }
  }
}