zoukankan      html  css  js  c++  java
  • js封装


    js封装 
    /***数组冒泡排序小到大**************************************************************************/
        
        //方法一
           function maoxiao1(arr){
               var temp=0;//临时变量 用作交换的中间变量
               for(var i=0;i<arr.length-1;i++){
                   for(var j=0;j<arr.length-1-i;j++){
                      if(arr[j] > arr[j+1]){
                          temp = arr[j];
                          arr[j] = arr[j+1];
                          arr[j+1] =temp;
                      }
                   }
               }
                   return arr; //返回一个数组
           }
        //方法二
           
           function maoxiao2(arr){
               var arr=arr.sort(function(a,b){return a-b});
               return arr;
            }
           
    /***数组冒泡排序大道小**************************************************************************/
        
        //方法一
           function maoda1(arr){
               var temp=0;//临时变量 用作交换的中间变量
                   for(var i=0;i<arr.length-1;i++){
                      for(var j=0;j<arr.length-1-i;j++){
                          if(arr[j] < arr[j+1]){
                              temp = arr[j];
                              arr[j] = arr[j+1];
                              arr[j+1] =temp;
                          }
                      }
                   }
                   return arr; //返回一个数组
               }
        
        //方法二
               function maoda2(arr){
                   var arr=arr.sort(function(a,b){return b-a});
                   return arr;
                }
               
    /***数组中最大值***************************************************************************************/
        
        function arrayMax(arr){
           var max = arr[0];//假设第一个数是最大的
           for(var i=0;i<arr.length;i++){
               if(max<arr[i]){
                   max = arr[i];
               }
           }
           return max
        }
        
    /***数组中最小值***************************************************************************************/     
        
        function arrayMin(arr){
           var min = arr[0];//假设第一个数是最大的
           for(var i=0;i<arr.length;i++){
               if(min>arr[i]){
                   min = arr[i];
               }
           }
           return min
        }
        
    /***向数组的末尾添加新值***************************************************************************************/     
        function push(arr,num){
           arr.push(num)
           return arr
        }
        
    /***向数组的头部添加新值***************************************************************************************/
        
        function unshift(arr,num){
           arr.unshift(num)
           return arr
        }
        
    /***从数组的尾部 删除 一个值,*******************************************************************************/        
        
        //情况一返回删除后的数组
           function pop1(arr){
               arr.pop()
               return arr
           }
        //情况二返回删除的值
           function pop2(arr){
               return arr.pop()
               
           }
    /***从数组的头部 删除 一个值,**********************************************************************************/
        
        //情况一返回删除后的数组
           function shift1(arr){
               arr.shift()
               return arr
           }
        
        //情况二返回删除的值
           function shift2(arr){
               return arr.shift()
               
           }
           
    /****获取当前时间***************************************************************************************/
        
        //方法一
           function time1(){
               var d=new Date()
               var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
               return  d.getFullYear()+"年"+(d.getMonth()+1)+"月" + d.getDate()+"日 " + arr[d.getDay()]+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            }
        //方法二
           function time2(){
               var d = new Date();
               return d.toLocaleString();
           }
           
           
    /****判断一个字面量在数组或字符串中的第一次的位置返回下标没有返回-1************************************/  
        
        function indexof(arr,num){
            return arr.indexOf(num)
        }
    /***截取字符串的字符 num1 起始位置(包含)num2(为长度 1指自身)********************************/   
        
        function substr(str,num1,num2){
            return str.substr(num1,num2)
        
        }
    /***截取字符串的字符 num1 起始位置(包含)num2(为下标不包括num2本身,最少为num1+1,)********************************/   
        
        function substring(str,num1,num2){
            return str.substring(num1,num2)
         }
        
    /***将字符串通过符号分割成数组********************************/
        
        function split(str,symbol){
           return str.split(symbol);
        }
    /****获取min-max之间的数*****************************************************************/
        
        function rand(min,max){
           return Math.floor( Math.random()*(max-min+1) + min );
        }
    /****获取四位验证码*****************************************************************/
        
        function yanzhengma(){
           var arr = [];//存放随机字符
           for(var i=0;i<4;i++){
               //随机产生一个 48--122之间的unicode值
               var asc = Math.floor( Math.random()*(122-48+1) +48 );
               while( asc>57&&asc<65 || asc>90&&asc<97 ){
                   asc = Math.floor( Math.random()*(122-48+1) +48 );//如果取出来不满足条件 字母、数字,重新随机取值
               }
               arr[i] = String.fromCharCode( asc );         
           }   
           return arr.join("");
        }
    /***** 去掉字符串两端的空白字符 返回去掉空白的字符*********************************************************************/
        function trim(str){
           return str.trim()
        }
        
    /****字符串转成小写**************************************************************/
        
        function tolowercase(str){
           return str.toLowerCase()
        }
        
    /****字符串转成大写**************************************************************/   
        function touppercase(str){
           return str.toUpperCase()
        }
        
    /***document.getElementsByClassName();兼容ie 6 7 8的写法 返回一个数组*******************************/ 
        
        function getclass(cname){
            //如果浏览器认识 该方法   高版本浏览器识别
            if(document.getElementsByClassName){
                return document.getElementsByClassName(cname);
            }
            //其他浏览器的(ie 6 7 8)
            var allobj = document.getElementsByTagName("*");//找到所有的标签对象
            var arr=[];
            for(var j=0;j<allobj.length;j++ ){
                if(allobj[j].className == cname){
                    arr.push(allobj[j]);
                }
            }
            return arr;
         }
    /******倒计时***************************************/
        
        //情况一 时分秒分别在3个标签里显示obj1为时obj2为分,obj3为秒
           function daojishi1(obj1,obj2,obj3,shi,fen,miao){
               var shi=shi;
               var fen=fen;
               var miao=miao;
               var timer=setInterval(time,1000)
               function ass(m){
                   if(m<10){
                      m="0"+m
                   }
                   return m
               }
               function time(){
                   if(miao<=0&&fen!=0){
                      fen--
                      miao=60
                   }else{
                      miao--
                   }
                   if(fen<=0&&shi!=0){
                      shi--
                      fen=60
                   }
                   if(shi<=0&&fen<=0&&miao<=0){
                      clearInterval(timer)
                   }
                   obj1.innerHTML= ass(shi)
                   obj2.innerHTML= ass(fen)
                   obj3.innerHTML= ass(miao)
               }
           }   
           
           //情况二 一个标签里显示时分秒
           function daojishi2(obj,shi,fen,miao){
               var shi=shi;
               var fen=fen;
               var miao=miao;
               var timer=setInterval(time,1000)
               function ass(m){
                   if(m<10){
                      m="0"+m
                   }
                   return m
               }
               function time(){
                   if(miao<=0&&fen!=0){
                      fen--
                      miao=60
                   }else{
                      miao--
                   }
                   if(fen<=0&&shi!=0){
                      shi--
                      fen=60
                   }
                   if(shi<=0&&fen<=0&&miao<=0){
                      clearInterval(timer)
                   }
                   obj.innerHTML=ass(shi)+":"+ass(fen)+":"+ass(miao)
               }
           }   
           
    /*****字符在字符串从左往右第一个的替换*************************************/      
        
        function replace(str,letter1,letter2){
           var str=str.replace(letter1,letter2)
           return str
        }
        
    /**一个img标签的图片自动切换** obj为需要切换的img标签 arr为路径地址(img/04big.jpg)************************************************************/
        function changeimg(obj,arr){
           var i=0;
           function changeImg(){     
               obj.src = arr[i];
               i++;
               if(i==arr.length){
                   i=0;   
               }
           }
           setInterval(changeImg,1000);
        }
    /******全选*btn为input标签type=checkbox****cks为被变得对象的类名或数组*****************************/
        
        function quanxuan(btn,cks){
           btn.onclick = function (){    
               if(btn.checked){
                   all(true);
               }else{
                   all(false);
               }
           }
           function all(f){
               for(var i=0;i<cks.length;i++){
                   cks[i].checked = f;  // "checked"
               }
           }
           
        }
        
    /********反选*btn为input标签type=checkbox****cks为被变得对象的类名或数组**********************************/  
        
        function fanxuan(btn,cks){
           btn.onclick = function (){    
               for(var i=0;i<cks.length;i++){
                   if(cks[i].checked){
                      cks[i].checked = false;
                   }else{
                      cks[i].checked =true;
                   }
               }
           }
        }
    /***显示*obj为要显示的对象*display=block***********************************************************/
        
        function block(obj){
           obj.style.display="block"
        }
        
    /***隐藏*obj为要隐藏的对象*display=none***********************************************************/ 
        
        function none(obj){
           obj.style.display="none"
        }
    /*******获取id名***********************************************************************************/
        
        function id(id){
           return document.getElementById(id);
        }
    /*******获取标签名***********************************************************************************/
        
        function tagname(tag){
           return document.getElementsByTagName(tag);
        }
    /*****图片上下两部分滑过效果********************************************************************/
    /****box显示区****pic大图*top:0,left:0**down为下半部分span**up为上半部分span**num1=大图height-显示区height****************************/
        /*<div class="xiaomi" id="box">
           <img src="images/mi.png" alt="" id="pic"/>
            <span class="up" id="picUp"></span>
           <span class="down" id="picDown"></span>
        </div>*/   
        function shangxiamove(box,pic,down,up,num1){
           var num = 0;
           var timer = null;
           pic.style.top = num+"px";
           up.onmouseover = function(){
               //清除定时器
               clearInterval(timer);
               //鼠标移入启动定时器
               timer = setInterval(function (){
                   num<=-num1 ? clearInterval(timer) : num-=1;
                   pic.style.top = num+"px";
               },1);
                      
           }
           down.onmouseover = function(){
               clearInterval(timer);
               timer = setInterval(function (){
                   if(num>=0){
                      clearInterval(timer);
                   }else{
                      num+=1;
                   }
                   pic.style.top = num+"px";
               },1)
           }
           box.onmouseout=function(){
               clearInterval(timer);
           }
        }
    /********放大镜*******num为 小图宽度  *大图显示区(宽度) /大图宽度**********************************************************/
        /*<div id = "box">
           <div id="small">
               <img src="images/001.jpg" id="img1"/>
               <div id="mask"></div>
           </div>
           <div id="big">
               <img src="images/0001.jpg" id="bigImage"/>
           </div>
        </div>*/
        
        //大图宽度 / 小图宽度   =  大图显示区(宽度) / 小图显示区(遮罩层)(宽度)   =  大图左偏移 /  遮罩层左偏移
        //fangdajing(id("box"),id("small"),id("mask"),id("big"),id("bigImage"),400*350/800)
        function fangdajing(box,small,mask,big,bigImage,num){
           // 重新计算  遮罩层的 宽度 和 高度
           var w = num;
           mask.style.width = w +"px";
           mask.style.height = w + "px";
           //鼠标移入到 small  上   ,遮罩层 和 大图显示区显示
           small.onmouseover = function (){
               mask.style.display = "block";
               big.style.display = "block";
           }
           //鼠标在小盒子上的移动事件
           small.onmousemove = function (event){
               var evt = event || window.event;
               var x = evt.clientX - box.offsetLeft - mask.offsetWidth/2;
               var y = evt.clientY - box.offsetTop - mask.offsetHeight/2;
               //边界问题处理
               if(x<0){  //左边界
                   x=0;
               }else if( x > (small.offsetWidth - mask.offsetWidth) ){  //右边界
                   x = small.offsetWidth - mask.offsetWidth;
               }   
               if(y<0){ //上边界
                   y=0;
               }else if( y > (small.offsetHeight - mask.offsetHeight) ){ //下边界
                   y = small.offsetHeight - mask.offsetHeight;
               }
               mask.style.left = x+"px";
               mask.style.top = y+"px";
               //大图宽度 / 小图宽度   =  大图显示区(宽度) / 小图显示区(遮罩层)(宽度)   =  大图左偏移 /  遮罩层左偏移
               bigImage.style.left = - x * big.offsetWidth/mask.offsetWidth +"px";
               bigImage.style.top = - y * big.offsetHeight/mask.offsetHeight +"px";
           }
           small.onmouseout = function (){
               mask.style.display = "none";
               big.style.display = "none";
           }
        }
        
    /********无缝滚动向左移动4张图的******************************************************************/
        /* *{margin:0;padding:0;}
           ul,ol{list-style:none;}
           img{vertical-align:top; }
           .box{margin:100px auto;300px;height:200px;position:relative;overflow:hidden;}
           .box ul{600%;position:absolute;left:0;top:0;}
           .box ul li{float:left;}
           .box ol li{float:left;20px;height:20px;border-radius:50%;margin-right:5px;text-align:center;line-height:20px;}
           .box ol{position:absolute;left:185px;top:160px;}*/
        /*<div class="box" id="scroll">
               <ul>
                   <li><img src="images/a.jpg"></li>
                   <li><img src="images/b.jpg"></li>
                   <li><img src="images/c.jpg"></li>
                   <li><img src="images/d.jpg"></li>
                   <li><img src="images/a.jpg"></li>  
               </ul>
               <ol>
                   <li style="">1</li>
                   <li>2</li>
                   <li>3</li>
                   <li>4</li>
               </ol>
        </div>*/
        //wufenggundong(tagname("ul")[0],tagname("ol")[0].children,300)
        function wufenggundong(ul,lis,imgwidth){
           var num=0;
           var timer = null;
           timer = setInterval(autoPlay,10);
           //封装一个函数 功能实现  文字背景色的改变(只保留当前的样式,其余恢复)
           function changeBgColor(n){
               for(var j=0;j<lis.length;j++){
                   lis[j].style.backgroundColor = "yellow";
               }
               lis[n].style.backgroundColor = "red";
           }
           //鼠标移入时:  当前标题数字 改变样式,其余样式清除;  显示对应的图片
           for(var i=0;i<lis.length;i++ ){
               lis[i].biaoji = i;
               lis[i].onmouseover = function (){
                   clearInterval(timer);//鼠标移入停止定时器
                   changeBgColor(this.biaoji); //处理标题文字 样式
                   ul.style.left = -(this.biaoji * imgwidth) + "px";
               }
               //鼠标离开  启动定时器,然后 找到当前的num值 即可
               lis[i].onmouseout = function (){
                   //alert( ul[0].offsetLeft );
                   num = ul.offsetLeft; //获取离开时的图片的 左偏移
                   timer = setInterval(autoPlay,10);
               }
           }
           //定时器调用
           function autoPlay(){
               switch(num){
                   case imgwidth*0:changeBgColor(1);break;
                   case -imgwidth*1:changeBgColor(2);break;
                   case -imgwidth*2:changeBgColor(3);break;
                   case -imgwidth*3:changeBgColor(0);break;
               }
               num--;
               if(num<=-imgwidth*4){
                   num = 0;
               }else{
                   ul.style.left = num +"px";
               }
           }
        }
    /********发送短信倒计时* (一个按钮上显示倒计时)**btn为按钮****num为倒计时时间************************/
        
        //sendmassage(tagname("button")[0],10)
        function sendmassage(btn,num){
           var count =num;
           var timer = null;
           btn.onclick = function(){
               btn.disabled = true;
               timer = setInterval(sendMessage,1000);
               function sendMessage(){
                   if(count>0){
                      btn.innerHTML = "还剩"+count+"秒";
                      count--;
                   }else{
                      clearInterval(timer);
                      btn.disabled = false;
                      btn.innerHTML = "发送短信倒计时";
                      count = 5;
                   }
               }
           }
        }
    /**********拖拽**obj为拖拽的对象**************************************************/
        
        //情况一只有自己本身拖拽没有移动范围限制
        //tuozhuai1(tagname("div")[0])
        function tuozhuai1(obj){
           obj.onmousedown = function(event){
                   var evt = event || window.event;
                   var x = evt.offsetX;//偏移量
                   var y = evt.offsetY;//偏移量
                   document.onmousemove = function (evt){
                      obj.style.left = evt.clientX - x +"px";
                      obj.style.top = evt.clientY - y +"px";
                   }
               }
           //抬起鼠标  取消 移动
           document.onmouseup = function(){
               document.onmousemove = null;
           }
        }
        
        
        //情况二 只有自己本身在窗口内拖拽 body必须有高度不然一点就消失了
        //tuozhuai2(tagname("div")[0])
        function tuozhuai2(obj){
           obj.onmousedown = function(event){
                   var evt = event || window.event;
                   var x = evt.offsetX;//偏移量
                   var y = evt.offsetY;//偏移量
                   document.onmousemove = function (evt){
                      obj.style.left = evt.clientX - x +"px";
                      obj.style.top = evt.clientY - y +"px";
                      if(box.offsetLeft<=0){
                          box.style.left = "0px";
                      } else if(box.offsetLeft >=(document.body.offsetWidth-box.offsetWidth) ){
                          box.style.left = document.body.offsetWidth-box.offsetWidth+"px"; 
                      }
                      if(box.offsetTop<=0){
                          box.style.top = "0px";
                      } else if(box.offsetTop >=(document.body.offsetHeight-box.offsetHeight) ){
                          box.style.top = document.body.offsetHeight-box.offsetHeight+"px";  
                      }
                   }
               }
           //抬起鼠标  取消 移动
           document.onmouseup = function(){
               document.onmousemove = null;
           }
        }
        
        
        //情况三完美拖拽 box拖拽对象  a1点击回放拖拽轨迹 按钮
        //tuozhuai3(id("box"),id("a1"))
        function tuozhuai3(obj,btn){
           var arrX = [];
           var arrY = [];
           //按下的过程
           obj.onmousedown = function(event){
               var evt = event || window.event;
               var x = evt.offsetX;
               var y = evt.offsetY;
               arrX = []; // 下一次移动之前 清空数组
               arrY = [];
               document.onmousemove = function (evt){
                   obj.style.left = evt.clientX - x +"px";
                   obj.style.top = evt.clientY - y +"px";
                   //将box的x坐标 和  y坐标 存放到对应数组中
                   arrX.push( obj.offsetLeft );
                   arrY.push( obj.offsetTop );
               }
           }
           //抬起过程
           document.onmouseup =function (){
               document.onmousemove = null;//取消移动
           }
           var timer = null;
           //给  点击回放拖动轨迹  单击事件
           btn.onclick = function (){
               //定义一个下标index   作用取数组中的值
               //启动定时器
               //取出数组中的x和y坐标,分别赋值给 box的 left  和  top 
               //下标 ++ 
               //当下标index == arrX.length   停止定时器       
               var index = arrX.length-1;
               timer = setInterval(function (){
                   obj.style.left = arrX[index--] + "px";
                   obj.style.top = arrY[index--] +"px";
                   if( index <=0 ){
                      clearInterval(timer);
                      arrX = []; // 控制只能回放一次删掉就可以一直回放
                      arrY = [];
                   }
               },10);         
           }
           //取消 按下  点击回放拖动轨迹 的 onmousedown   阻止冒泡
           btn.onmousedown = function (event){
               var evt = event || window.event;
               if( evt.stopPropagation ){
                   evt.stopPropagation();
               }else{
                   evt.cancelBubble = true;
               }
           }
        }
        
    /********控制字符个数****obj为一个input输入框**txt为要显示剩余字符数的对象***************************************/
        
        //kongzhizifushu(tagname("input")[0],tagname("span")[0],10)
        function kongzhizifushu(obj,txt,num){
               var num=num
           obj.onkeyup = function (){
               //获取输入的信息
               var v = obj.value;
               var len = obj.value.length;
               var sheng  = num-len;
               if( sheng>=0 ){
                   txt.innerHTML = "您还可以输入"+sheng+"个字符";
               }else{
                   obj.value = v.substr(0,num);//截取前10个字符
               }
           }
        }
        
    /**********只有省和市两个的下拉列表**********************************************************************/
        
        /*<select id="prov"><option value="">请选择省</option></select>
        <select id="city"><option>请选择市</option></select>
        var arr_Prov = ["河北","河南","山西"];
        var arr_City = [['石家庄','邯郸','保定'],['洛阳','郑州'],['太原','大同','长治','运城']];*/
        //shengshi(id("prov"),id("city"),arr_Prov,arr_City)
        
        function shengshi(prov,city,arrprov,arrcity){
           var arr_Prov = arrprov;
           var arr_City = arrcity;
           for(var i=0;i<arr_Prov.length;i++){
               opt = document.createElement("option");
               opt.innerHTML = arr_Prov[i];
               opt.value = i;//给每一个option添加一个value值
               prov.appendChild(opt);
           }      
           prov.onchange = function (){
               //当点击的市 请选择省   清空市的信息  恢复原始状态
               if(this.value==""){
                   city.innerHTML = '<option>请选择市</option>';
                   return;
               }          
               //下一次改变之前  清除市的信息
               city.length = 1;
               //alert(this.value)
               for(var i=0;i<arr_City[this.value].length;i++){
                   opt = document.createElement("option");
                   opt.innerHTML = arr_City[this.value][i];
                   city.appendChild(opt);
               }      
           }
        }
    /********敏感词过滤**********************************************************************/
        
        //str为获取输入内容 arr为敏感词数组
        /*tagname("button")[0].onclick=function(){
           var arr = ["aa","cc"];                        //敏感词
           var str=tagname("input")[0].value              //获取输入的内容
            tagname("input")[0].value=minganci(str,arr)    //替换敏感词并输出
        }*/
        function minganci(str,arr){
           for(var i=0;i<arr.length;i++){
               //var reg = new RegExp(arr[i],"gi");
               var reg = "/"+arr[i]+"/g";
               reg = eval(reg);
               str = str.replace( reg, "*");
           }
           return str
        }
    /*****通过正则找字符串中的数字***str为要查找的字符串,返回所有数字的数组**********************************************/
        
        //var str = "fdsf123sfd的份上12的中文13";alert(regzhaoshuzi(str))
        function regzhaoshuzi(str){
           var reg = /d+/g;
           var arr = str.match(reg); //   /d+/g----正则表达式---字符串匹配模式,i,g,m
            return arr
        }
        
    /*****阻止右键默认行为**调用时必须有右键单击事件***************************************/
        
        /*document.oncontextmenu=function(){
           zuzhiyoujian()
        }*/
        function zuzhiyoujian(){
           var evt=event||window.event
           if(evt.preventDefault){
               evt.preventDefault( ) ; //标准浏览器
           }else{
               evt.returnValue = false ;       //IE浏览器的方式
           }
        }
    /*********阻止冒泡*******************************************************************/
        
        function zuzhimaopao(){
           var evt=event||window.event
           if(evt.stopPropagation){
               evt.stopPropagation( ) ; //标准浏览器
           }else{
               evt.cancelBubble=true;       //IE浏览器的方式
           }
        }
        
    /********去掉字符串中空格的操作**返回去除后的字符串***************************************************************************/
        
        //var str = "3 3w or l d3 33 he llo 33 333";
        //情况一去除所有空格
        //console.log(qudiaokongge1(str))
        function qudiaokongge1(str){
           var reg = /s+/g;
           var str=str.replace(reg,'');
           return str
        }
        //情况二去除去掉字符串开始处的空格
        function qudiaokongge2(str){
           var reg = /^s+/;
           var str=str.replace(reg,'');
           return str
        }
        //情况三去掉字符串结尾处的空格
        function qudiaokongge3(str){
           var reg = /s+$/
           var str=str.replace(reg,'');
           return str
        }
    /**********ajax请求***************************************************************/
        /*ajax("as.txt?d="+new Date().getTime(), //链接加一个毫秒值解决缓存问题
        function(str){
           var arr = JSON.parse(str);
           console.log(arr)            //请求成功操作内容返回数据为字符串改为对象,从服务器返回到客户端的结果数据都是string类型
        },function(){
                                     //请求失败操作内容
        })*/
        function ajax(url,fnWin,fnFaild){
           var ajax = null;
           if (window.XMLHttpRequest) {
               ajax = new XMLHttpRequest();
           }else{
               ajax = new ActiveXObject("Microsoft.XMLHTTP");
           }
           ajax.open("get",url,true);    
           ajax.send();
           ajax.onreadystatechange = function (){
               if (ajax.readyState==4) {
                   if(ajax.status == 200){
                      if (fnWin) { //判断该函数是否存在,如果存在,就调用  返回结果
                          fnWin(ajax.responseText);
                      }          
                   }else{
                      if (fnFaild){
                          fnFaild();
                      }   
                   }
               }
           }
        }
    /*******jsonp请求***src为请求路径**请求完后***必须创建一个新的函数名为给定的接收数据*******************/
        
        //jsonp(src)
        function jsonp(osrc){
           var oscript=document.createElement("script");
           oscript.type="text/javascript";
           oscript.src=osrc;
            document.getElementsByTagName("head")[0].appendChild(oscript);
        }
        
    /*******完美运动*************************************************************/
        function startMove(obj,json,fn){ //  div1 
           clearInterval(obj.timer);  //为每一个对象添加一个  timer属性    
           obj.timer = setInterval(function(){
               var flag = true;// 开关变量:当flag为true时, 如果所有的动作都执行完毕,清除定时器
               //遍历json对象
               for(var attr in json){
                   var current = 0;
                   if(attr == "opacity"){
                      current =  parseFloat( getStyle(obj,attr) ) * 100;
                   }else{            
                       current =parseInt( getStyle(obj,attr) ) ;
                   }
                   var speed = ( json[attr] - current )/10;
                   speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
                   if(json[attr] != current){               
                      flag = false;
                   }              
                   if( attr =="opacity" ){
                      obj.style.opacity = (current +speed) /100;
                      obj.style.filter = "alpha(opacity="+(current + speed)+")"
                   }else if(attr=="zIndex"){
                      obj.style.zIndex = json[attr];//
                   }else{
                      obj.style[attr] = current + speed +"px";    
                   }
               }
               //当flag为true时, 如果所有的动作都执行完毕,清除定时器
               if(flag){
                   clearInterval(obj.timer);                   
                   if(fn){
                      fn();  
                   }
               }       
           },30);
        }
        function getStyle(obj,attr){
           if (obj.currentStyle) {
               return obj.currentStyle[attr];
           }else{
               return getComputedStyle(obj,false)[attr];
           }
        }
    /*********cookie操作**************************************************************************/
        //情况一没有转码的存入汉字浏览器容易崩溃
        //  value值  类型是一个  对象
        function setCookie1(key,value,days){
           var now = new Date();
           now.setTime(now.getTime() + days*24*60*60*1000 )
           document.cookie=key+"="+value + ";expires="+now;
        }
        function getCookie1(key){
           //如果cookie中有数据  才可以获取数据
           if(document.cookie){      
               var cookieInfo = document.cookie;
               //cookie中可能会包含一些 额外的数据,这些数据特点是由   分号和空格间隔的
               //所以 先将 分号和空格  替换掉   替换成  ;
               var arr = cookieInfo.replace(/;s/g,';').split(";");  
               for(var i=0;i<arr.length;i++){
                   item = arr[i].split("=");
                   if(item[0] == key){
                      brr = item[1];
                      return JSON.parse(brr);//如果找到 我们想要的键,将值转成数组返回
                   }
               }
               //如果cookie中 没有我们想获取的键值,直接返回一个空数组
               return [];
           }
           //如果cookie中没有数据,直接返回一个空数组
           return [];
        }
        function removeCookie1(key){
           setCookie(key,"",-1);
        }
        //情况二转码后的存入cookie
        //添加cookie     encodeURIComponent()转码   decodeURIComponent()解码
            function setcookie2(name,value,days){//value转换为  字符串再存!!!!  当存入为汉字时,浏览器易崩溃
               var nameo=encodeURIComponent(name);
               var valueo=encodeURIComponent(value);
               var date=new Date;
               date.setDate(date.getDate()+days);
               document.cookie=nameo+"="+valueo+";expires="+date;
           }
           
           //查找cookie 并获取与name对应值
           function getcookie2(name){
               //如果cookie中有数据  才可以获取数据
               if(document.cookie){      
                   var result="";
                   var arr=document.cookie;
                   arr=decodeURIComponent(arr);
                   arr=arr.split("; ")
                   for (var i=0;i<arr.length;i++) {
                       if(arr[i].split("=")[0]==name){
                          result=arr[i].split("=")[1];
                          
                      }
                      
                   }
                   if(result==""){
                      return false;
                   }
                   return JSON.parse(result)
               }
               //如果cookie中没有数据,直接返回一个cuo
               return false;
           }
           //删除配合添加用
           function delcookie2(name){
               setcookie(name,"",-1)
               
           }
           
    /*******父节点*****************************************************************************/
        
        function parent(obj){
           return obj.parentNode;
        }
        
    /*******下一个兄弟节点*****************************************************************************/
        function next(obj){
           return obj.nextElementSibling;
        }
        
    /*******所有兄弟节点不包含自己*返回数组****************************************************************************/
        
        function nextall(obj) {
           var a = [];
           var p = obj.parentNode.children;
           for(var i =0,pl= p.length;i<pl;i++) {
               if(p[i] !== obj) a.push(p[i]);
           }
           return a;
        }
        
    /*******上一个兄弟节点****************************************************************************/
        
        function prev(obj){
           return obj.previousElementSibling;
        }
        
    /*****第一个孩子****************************************************/
        
        function first(obj){
           return obj.firstElementChild;
        }
    /*****最后一个孩子****************************************************/
        
        function last(obj){
           return obj.lastElementChild;
        }
        
    /*****最后一个孩子****************************************************/
        
        function children(obj){
           return obj.children;
        }
        
    /*****创建节点****************************************************/
        
        function create(obj){
           return document.createElement(obj)
        }   
        
    /****在最后一个子元素后顺序添加节点**********************/
        
        function append(parent,child){
           return parent.appendChild(child)
        }
        
    /****删除节点*obj为要删除的节点*********************/
        
        function remove(obj){
           return obj.parentNode.removeChild(obj)
        }
    /****obj为要添加的节点**ele为参照节点***在参照节点前面添加*****************/
        
        function before(obj,ele){
           return ele.parentNode.insertBefore(obj,ele)
        }
        
    /******获取标签属性** name为属性名*  attr为属性值************************************/
        
        function getattr(obj,name){
           return obj.getAttribute(attr)
        }
    /******设置标签属性***************************************/
        
        function setattr(obj,name,attr){
           return obj.setAttribute(name,attr)
        }
        
    /******移除标签属性***************************************/
        
        function removeattr(obj,name){
           obj.removeAttribute(name)
        }
        
    /*****获取随机颜色*************************************************/
        
        //情况一获取#000000
           //封装随机颜色
           function suijiyanse1() {
               var c = "#";
               var carray = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
               for(var i = 0; i < 6;i++)
               {
               var czuobiao = Math.round(Math.random()*15);
               c =c+carray[czuobiao];
               }
               return c;
           }
                   
                   
           //情况二RGB随机颜色
           function suijiyanse2(){
               function suijishu(){
                   return Math.floor(Math.random()*255)
               }
               var R=suijishu();
               var G=suijishu();
               var B=suijishu();
               return "rgb("+R+","+G+","+B+")";
           }
        
    /**********************************************************/
  • 相关阅读:
    宋词:一剪梅,雨打梨花深闭门。唐寅
    算法整理之动态规划
    与君相恋100次
    死循环之----恐怖游轮
    IOS 霓虹灯效果
    IOS 在viewController上添加视频
    iOS UIImagePickerController拍照与摄像
    socket开发基础
    RunLoop 原理和核心机制
    Objective-C的Runtime System
  • 原文地址:https://www.cnblogs.com/zhangshuda/p/7640183.html
Copyright © 2011-2022 走看看