zoukankan      html  css  js  c++  java
  • 工作笔记——dom属性巧用

    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('修改');
                            }                        
                        }
                    })
                }
                
            })
    

      

      

      

      

  • 相关阅读:
    通过android XML 创建图形,降低对美工的依赖
    ViewPager学习之仿微信主界面
    Linux学习日志--文件搜索命令
    蓝桥杯 历届试题 小朋友排队 【树状数组】+【逆序数】
    操作系统——IO管理
    Mac和PC在工作中管理的对比(5)
    虚拟地址空间分配
    UVA 624 CD(DP + 01背包)
    【CSS】瀑布流布局的两种方式:传统多列浮动和绝对定位布局
    外煤关注:百度收购大部分糯米股份
  • 原文地址:https://www.cnblogs.com/MonaSong/p/6070629.html
Copyright © 2011-2022 走看看