工作笔记——dom属性巧用

Posted 2020-08-19 青草圆

1、获取验证码

dom:

<span class="btn btn-primary">获取验证码</span>

js:

/**
*@Author Mona
*@date 2016-11-14
*@description 获取验证码
*@param {target} string 需要实现获取验证码的dom元素
*@param {url} string  请求地址
*@param {param} object 请求参数
*/
//使用方式  new GetVerifyCode(‘#get_code‘,‘/my_account‘,{userName:‘Mona‘,mibile:‘13052587892‘})
function GetVerifyCode(target,cur_url,param){
    var _this = this;
    _this.target = target;
    _this.url = contextPath+cur_url;
    _this.param = param; 
    _this.init();   
}

GetVerifyCode.prototype = {
  init:function(){
      var _this = this;
      $(_this.target).on(‘click‘,function(){
          if(typeof $(_this.target).attr(‘disabled‘)==‘undefined‘){
              $(_this).attr(‘disabled‘,‘‘);
              if(!_this.param){
            	  return
              }
              _this.getCode();   
          }   
      })
  },
  getCode:function(){
      var _this = this;
      $.ajax({
        type:‘get‘,
        data:_this.param,
        url:_this.url,
        success:function(data){
            if(data.statusCode==‘200‘){
                    var count = 60;
                    var timer = setInterval(function(){
                        count--;
                        if(count>0){
                            $(_this.target).text(count+‘秒后重新获取‘);
                            $(_this.target).attr(‘disabled‘,‘‘); 
                        }else{
                            clearInterval(timer);
                             $(_this.target).text(‘获取验证码‘);
                             $(_this.target).removeAttr(‘disabled‘);
                        }
                    },1000)             
                  }else{
                      $(_this.target).removeAttr(‘disabled‘);
                  }
        },
        error:function(jqXHR,textStatus,errorThrown){
            renderErrorMsg(jqXHR,textStatus,errorThrown)
        }
    })
  }

}　　

　　

2、一个按钮实现  修改 保存

dom:

<span data-operater="modify">修改</span>　　

js:

$(‘.edit-data‘).on(‘click‘,function(){                      
            if(!shenqu){
                return
            }
            var _this = this;
            var stauts = $(_this).attr(‘data-operater‘);

            if(stauts==‘modify‘){
                $(_this).attr(‘data-operater‘,‘sure‘);
                $(_this).text(‘保存‘);
            }

            if(status == ‘sure‘){
                var businessKey = $(_this).attr(‘data-businessKey‘);
                var provinceUserId = shenqu;
                $.ajax({
                    type:‘post‘,
                    url:contextPath+‘/winmanage/provinceManager?businessKey=‘+businessKey+‘&provinceUserId=‘+provinceUserId,
                    success:function(data){
                        if(data.statusCode==‘200‘){
                            $(_this).attr(‘data-operater‘,‘modify‘);
                            $(_this).text(‘修改‘);
                        }                        
                    }
                })
            }
            
        })