js基础和工具库

  1 /*
  2  *
  3  * 2015/4/18
  4  * js 基础 和 工具库
  5  *
  6  *
  7  * */
  8 //获取对象样式
  9 function hGetStyle(obj , attr){
 10     return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj ,null )[attr];
 11 }
 12
 13 //移动函数
 14 function hDoMove(obj , attr ,s ,target , endFn ){
 15     // 获取当前对象的的位置
 16     var pos = parseInt(hGetStyle(obj,attr));
 17     //如果目标点的位置 大于当前距离，那么 就是正向移动，否则就是负向移动
 18     s = target > pos ? s : -s;
 19     //清除上一个定时器
 20     clearInterval(obj.hDoMovetimer);
 21     //创建新的定时器
 22     obj.hDoMovetimer = setInterval(function(){
 23         //距离等于 当前对象的实时距离 +  每次要移动的距离
 24         var distance = parseInt(hGetStyle(obj,attr)) + s ;
 25         // 如果 上一步计算的距离大于 给定的目标点距离， 进行修正  =  目标距离
 26         if( distance > target && s > 0 || distance < target && s < 0){
 27             distance = target;
 28         }
 29         //  对象移动
 30         obj.style[attr] = distance + ‘px‘;
 31         // 如果距离 已经到达目标点， 清除定时器，执行回调函数
 32         if( distance === target){
 33             clearInterval(obj.hDoMovetimer);
 34             // 回调函数是否是未定义？  不是则执行
 35             endFn && endFn();
 36         }
 37     },20)
 38 }
 39 //抖动函数
 40 function hShake ( obj, attr, endFn ) {
 41     /*
 42      *   两种办法解决抖动函数隐患的问题：
 43      * 1. 进入函数先  进到一个if控制，永远不直接执行抖动函数的主体代码 ， 而是取当前 对象的位置和  50毫秒后的位置 ，  比较是否相等， 如果相等，
 44      *          则 说明对象当前抖动已经结束， 可以执行抖动效果！（有稍微的一点小BUG）
 45      * 2.   如果用一个变量开关来控制，也是挺好的， 但是， 变量开关不能函数开始被初始化也不能在函数结束后被清除。。 否则，每次触发这函数都可以
 46      *         顺利的往下执行抖动函数的主体代码，那就不能修复问题。  需要一个变量，他能存在的时间更长，  将变量挂在 window 的身上的时候 （win
 47      * dow.flag = false），每次就只能触发一次 对象进行抖动，下一个需要等到上一个抖动的对象抖动结束后，才能抖动， 这种效果，并不是想要
 48      * 的，所以  ， 将开关挂在 传递进来的 obj身上 是最好的选择， 每个对象身上的开关管理 各自身上的 抖动问题处理，而且obj.flag在函数执行结束后
 49      * 并没有被回收，因为，他是从函数外部传递进来的，生命期很长！！ 这样再次触发函数的时候，obj.flag = true，这个条件成立  if(obj.flag)
 50      * {return}  ，不往下执行了。。。除非抖动结束后， num ===  数组的最后一个值， 这时候才 赋值 为 false.
 51      * */
 52     if(obj.flag) {return} ; //初始化 未定义（false 不执行 return)，
 53     obj.flag = true; // 马上赋值 true，  这样再次触发 函数  上一个判断就为 真（obj.flag 是传递进来的对象的属性，而对象是从外部传进来的，所以 没有被回收）， 直接返回 ，不执行以下代码。
 54
 55     var pos = parseInt( hGetStyle(obj, attr));    // 刚开始对象的位置
 56
 57     //抖动函数运动轨迹数组
 58     var arr = [];            // 20, -20, 18, -18 ..... 0
 59     var num = 0;
 60     var timer = null;
 61     //自动生成一个运动轨迹的数组
 62     for ( var i=20; i>0; i-=2 ) {
 63         arr.push( i, -i );
 64     }
 65     arr.push(0);
 66     //先清除定时器
 67     clearInterval( obj.shake );
 68
 69     obj.shake = setInterval(function (){
 70         obj.style[attr] = pos + arr[num] + ‘px‘;
 71         num++;
 72         //如果已经运动到最后一个值，清除定时器，执行回调函数
 73         if ( num === arr.length ) {
 74             clearInterval( obj.shake );
 75             endFn && endFn();
 76             obj.flag = false;  //抖动结束后， 赋值false， 再次触发这个函数，会执行顶部的判断,就能再次抖动拉
 77         }
 78     }, 50);
 79 }
 80
 81
 82 /*
 83 读取或者设置el元素的透明值，val取值为0-1
 84 */
 85 function hOpacity(el,val) {
 86     var f=el.filters,s=el.style;
 87     if (arguments.length==1)
 88         return f?(f.alpha?(f.alpha.opacity/100):1):(s.opacity||1);
 89     s.zoom=1;
 90     s.filter="alpha(opacity="+parseInt(val*100)+")";
 91     s.opacity=val;
 92 };
 93
 94 //透明度淡出函数
 95 function hFadeOut(obj , time ,endFn){
 96     obj.iNum = 0;
 97     clearInterval(obj.hFadeTimer);
 98     obj.hFadeTimer = setInterval(function(){
 99         obj.iNum++;
100         //使用设置和读取透明度函数
101         hOpacity(obj,hOpacity(obj)-0.1);
102         //处理有些浏览器透明度不能到零的问题。
103         if(obj.iNum >= 10){
104             obj.style.opacity = 0;
105             obj.iNum = 0;
106         }
107         if(hGetStyle(obj, ‘opacity‘) == 0){
108             clearInterval(obj.hFadeTimer);
109             endFn && endFn();
110         }
111     },time)
112 }
113
114
115 //获取当前并设置详细年月日期,设置第二个参数来确定获得的年月日详细情况
116 function hgetTime(iNum){
117     var hTime ={};
118
119     var myTime = new Date();
120
121     var iYear = myTime.getFullYear();
122     var iMonth = myTime.getMonth()+1;
123     var iDate = myTime.getDate();
124     var iWeek = myTime.getDay();
125     var iHours = myTime.getHours();
126     var iMin = myTime.getMinutes();
127     var iSec = myTime.getSeconds();
128
129     if( iWeek === 0 ) iWeek = ‘星期日‘;
130     if( iWeek === 1 ) iWeek = ‘星期一‘;
131     if( iWeek === 2 ) iWeek = ‘星期二‘;
132     if( iWeek === 3 ) iWeek = ‘星期三‘;
133     if( iWeek === 4 ) iWeek = ‘星期四‘;
134     if( iWeek === 5 ) iWeek = ‘星期五‘;
135     if( iWeek === 6 ) iWeek = ‘星期六‘;
136
137     //默认显示所有的年月日星期等详细的信息
138     if(iNum === 0 || typeof(iNum) == ‘undefined‘){
139         hTime.str = iYear+ ‘年‘ +iMonth+‘月‘+iDate+‘日 ‘+iWeek+‘ ‘+ toTwo(iHours)+‘ : ‘+ toTwo(iMin)+‘ : ‘+ toTwo(iSec);
140     }else if(iNum === 1){
141         hTime.str = toTwo(iHours)+‘ : ‘+ toTwo(iMin)+‘ : ‘+ toTwo(iSec);
142     }else if(iNum === 2){
143         hTime.str = toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
144     }
145
146     function toTwo ( n ) {
147         return n < 10 ?  ‘0‘ + n : ‘‘ + n;
148     }
149     //时间戳
150     hTime.getTime = Math.floor( myTime.getTime()/1000 );
151     hTime.Hours = iHours;
152     hTime.Min = iMin;
153     hTime.Sec = iSec;
154     return hTime;
155 }