«

js 公共方法封装

时间:2023-3-1 22:18     作者:wen     分类: F2E


//根据标签获取对象
//参数1:DOM对象#Id  .class name
function $(name){
   var fuhao = name.substr(0,1)
   var nam = name.substr(1);
   switch(fuhao){
      case '#':
         return document.getElementById(nam);
         break;
      case '.':
         return document.getElementsByClassName(nam);
         break;
      default:
         return document.getElementsByTagName(name) || document.getElementsByName(name);
         break;
   }
}
//动画
//参数1:DOM对象
//参数2:需要改变的元素对象{height:100,width:100}
//参数3:到达目的地的 回调函数
function animate(obj,json,fun){
   clearInterval(obj.timer);
   obj.timer = setInterval(function(){
      for(var attr in json){
         //定义一个标记
         var flag = true;

         if(attr == 'opacity'){
            var now = parseInt(getStyle(obj,attr) * 100);

         }else{
            var now = parseInt(getStyle(obj,attr));
         }

            var mudidi = parseInt(json[attr]);

         var speed = (mudidi - now)/10;//速度
         speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

         console.log(now);
         if(attr == 'opacity'){    
            obj.style[attr] = (now + speed)/100;               
         }else{                
            obj.style[attr] = (now + speed)+'px';                 
         }  
         if(now != mudidi){
            flag = false;
         }
      }
      if(flag){
         clearInterval(timer);
         if(fun){
            fun();
         }
      }
   },100);

}
//获取DOM对象css样式
function getStyle(obj,attr){
   if(obj.currentStyle){
      return obj.currentStyle[attr];
   }else{
      return getComputedStyle(obj,false)[attr];
   }
}
//获取日期
function date(){
   var odate = new Date();
   var year = odate.getFullYear();
   var month = odate.getMonth()+1;
   var date = odate.getDate();
   var hour = odate.getHours();
   var minutes = odate.getMinutes();
   var seconds = odate.getSeconds();
   var day = odate.getDay();
   op.innerText = '当前时间是:'+year+"/"+month+"/"+date+" "+hour+":"+minutes+':'+seconds+':'+'星期'+day;
}
//参数1:监视的html对象
//参数2:监视的事件类型
//参数3:事件发生时执行的函数
function bindEvent(obj,eventType,fun){
   if(window.addEventListener){
      obj.addEventListener(eventType,fun,false);
   }else{
      obj.attachEvent('on'+eventType,fun);
   }
}
//事件冒泡
   //主流浏览器:事件对象的 stopPropogation()方法进行阻止
   //非主流浏览器:事件对象的 cancelBubble = true;
function stopMaoPao(e){
   var ev = e || window.event;
   if(ev.stopPropagation){
      ev.stopPropagation();
   }else{
      ev.cancelBubble = true;
   }
}
//获取滚动条高度
function scrollTop(){
   scrollTop =  document.documentElement.scrollTop||document.body.scrollTop;//兼容性
   return scrollTop;
}

//删除某个标签里的class属性
function removeClass(obj,clsName){
   var cName = obj.className;
   var arr = cName.split(' ');
   for (var i = 0; i < arr.length; i++) {
      if(arr[i] = clsName){
         arr.splice(i,1);
      }
   }
   cName =arr.join(' ');
   obj.className = cName;
}  

//给某个标签添加class属性
//参数1:当前对象
//参数2:添加的class名
function addClass(obj,clsName) {
   var cName = obj.className;

   //判断该标签有没有class属性
   if(!cName){
      //没有class属性
       obj.className = cName;
       return;
   }
   var arr = cName.split(' ');
   for(var i;i<arr.length;i++){
      if(arr[i] == clsName){
         return;
      }
   }
    obj.className += ' '+clsName;
}
//封装一个AJAX操作方法
//通过对象的request方法发出AJAX请求
var $$ = {
   request:function(opt){
      //兼容性处理
      try{
         var xhr = new ActiveXObject("Msxml2.XMLHTTP"); //IE
      }catch(e){
         var xhr = new XMLHttpRequest(); //主流浏览器
      }
      //2.发出请求
      if(opt.method == 'get'){
         //如果传递参数,参数写到URL地址栏上
         var content = encodeURIComponent(opt.data);
         //期望传递:name,随机数 
         xhr.open('get',opt.url,true);
         xhr.send();
      }else{
         //post请求时会将数据以表单的形式传递
         xhr.open('post',opt.url,true);
          xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
          //开始发送
          xhr.send(opt.data);
      }
      //监视服务器进度
      xhr.onreadystatechange = function(){
           if(xhr.readyState == 4 && xhr.status ==200){
              if(xhr.dataType == 'xml'){
                 opt.callback(xhr.responseXML);
              }else if(opt.dataType == 'json'){
                 eval('var obj ='+xhr.responseText);
                 opt.callback(obj);
              }else{
                 opt.callback(xhr.responseText);
              }
           }
       }
   }
}
$$.request({
   method:'get',
   url:'1.php',
   data:'name=amao',
   dataType:'json',
   callback:function(result){
      console.log(result);
   }
})

标签: javascript