js基础和工具库

  1 /*
  2  * 作者:   胡乐
  3  * 2015/4/18
  4  * js 基础 和 工具库 
  5  * 
  6  * 
  7  * */
  8 //根据获取对象
  9 function hGetId(id){
 10     return document.getElementById(id);
 11 }
 12 //获取标签
 13 function hGetTagName(el , parentObj){
 14     return parentObj?parentObj.getElementsByTagName(el):document.getElementsByTagName(el);
 15 }
 16 //获取class  
 17 function hGetClass(paremtObj,tagName,className){
 18     
 19     var aEl = obj.getElementsByTagName(tagName);
 20     var arr = [];
 21     var arrClassName = [];
 22     
 23     for (var i = 0; i < aEl.length; i++) {
 24         arrClassName = aEl[i].className.split(' ');
 25         for (var j = 0; j < arr2.length; j++) {
 26             if(arrClassName[j] === className){
 27                 arr.push(aEl[i]);
 28                 break;
 29             }
 30         }
 31     }
 32     
 33     return arr;
 34 }
 35 //查找数组是否存在某一个值
 36 function arrIndexOf(arr , v){
 37     for (var i = 0; i < arr.length; i++) {
 38         if(arr[i] == v){
 39             return i;
 40         }
 41     }
 42     return -1;
 43 }
 44 //添加class
 45 function addClass(obj,className){
 46     if(obj.className == ''){
 47         obj.className = className;
 48     }else{
 49         var arrClassName = obj.className.split(' ');
 50         var _index = arrIndexOf(arrClassName , className);
 51         if(_index == -1){
 52             obj.className += ' '+className;
 53         }
 54     }
 55 }
 56 //移除class
 57 function removeClass(obj,className){
 58     if(obj.className != ''){
 59         var arrClassName = obj.className.split(' ');
 60         var _index = arrIndexOf(arrClassName, className);
 61         if(_index != -1){
 62             arrClassName.split(_index,1);
 63             obj.className = arrClassName.join(' ');
 64         }
 65     }
 66 }
 67 //获取对象样式
 68 function hGetStyle(obj , attr){
 69     return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj ,null )[attr]; 
 70 }
 71 
 72 //移动函数
 73 function hDoMove(obj , attr ,s ,target , endFn ){
 74     // 获取当前对象的的位置
 75     var pos = parseInt(hGetStyle(obj,attr));
 76     //如果目标点的位置 大于当前距离,那么 就是正向移动,否则就是负向移动
 77     s = target > pos ? s : -s;
 78     //清除上一个定时器
 79     clearInterval(obj.hDoMovetimer);
 80     //创建新的定时器
 81     obj.hDoMovetimer = setInterval(function(){
 82         //距离等于 当前对象的实时距离 +  每次要移动的距离
 83         var distance = parseInt(hGetStyle(obj,attr)) + s ;
 84         // 如果 上一步计算的距离大于 给定的目标点距离, 进行修正  =  目标距离
 85         if( distance > target && s > 0 || distance < target && s < 0){
 86             distance = target;
 87         }
 88         //  对象移动
 89         obj.style[attr] = distance + 'px';
 90         // 如果距离 已经到达目标点, 清除定时器,执行回调函数
 91         if( distance === target){
 92             clearInterval(obj.hDoMovetimer);
 93             // 回调函数是否是未定义?  不是则执行
 94             endFn && endFn();
 95         }
 96     },20)
 97 }
 98 //抖动函数
 99 function hShake ( obj, attr, endFn ) {
100     /*
101      *   两种办法解决抖动函数隐患的问题:
102      * 1. 进入函数先  进到一个if控制,永远不直接执行抖动函数的主体代码 , 而是取当前 对象的位置和  50毫秒后的位置 ,  比较是否相等, 如果相等,
103      *          则 说明对象当前抖动已经结束, 可以执行抖动效果!(有稍微的一点小BUG)
104      * 2.   如果用一个变量开关来控制,也是挺好的, 但是, 变量开关不能函数开始被初始化也不能在函数结束后被清除。。 否则,每次触发这函数都可以
105      *         顺利的往下执行抖动函数的主体代码,那就不能修复问题。  需要一个变量,他能存在的时间更长,  将变量挂在 window 的身上的时候 (win
106      * dow.flag = false),每次就只能触发一次 对象进行抖动,下一个需要等到上一个抖动的对象抖动结束后,才能抖动, 这种效果,并不是想要
107      * 的,所以  , 将开关挂在 传递进来的 obj身上 是最好的选择, 每个对象身上的开关管理 各自身上的 抖动问题处理,而且obj.flag在函数执行结束后
108      * 并没有被回收,因为,他是从函数外部传递进来的,生命期很长!! 这样再次触发函数的时候,obj.flag = true,这个条件成立  if(obj.flag)
109      * {return}  ,不往下执行了。。。除非抖动结束后, num ===  数组的最后一个值, 这时候才 赋值 为 false.
110      * */
111     if(obj.flag) {return} ; //初始化 未定义(false 不执行 return),
112     obj.flag = true; // 马上赋值 true,  这样再次触发 函数  上一个判断就为 真(obj.flag 是传递进来的对象的属性,而对象是从外部传进来的,所以 没有被回收), 直接返回 ,不执行以下代码。
113     
114     var pos = parseInt( hGetStyle(obj, attr));    // 刚开始对象的位置
115 
116     //抖动函数运动轨迹数组
117     var arr = [];            // 20, -20, 18, -18 ..... 0
118     var num = 0;
119     var timer = null;
120     //自动生成一个运动轨迹的数组    
121     for ( var i=20; i>0; i-=2 ) {
122         arr.push( i, -i );
123     }
124     arr.push(0);
125     //先清除定时器    
126     clearInterval( obj.shake );
127     
128     obj.shake = setInterval(function (){
129         obj.style[attr] = pos + arr[num] + 'px';
130         num++;
131         //如果已经运动到最后一个值,清除定时器,执行回调函数
132         if ( num === arr.length ) {
133             clearInterval( obj.shake );
134             endFn && endFn();
135             obj.flag = false;  //抖动结束后, 赋值false, 再次触发这个函数,会执行顶部的判断,就能再次抖动拉
136         }
137     }, 50);
138 }
139 
140 
141 /*
142 读取或者设置el元素的透明值,val取值为0-1
143 */
144 function hOpacity(el,val) {
145     var f=el.filters,s=el.style;
146     if (arguments.length==1) 
147         return f?(f.alpha?(f.alpha.opacity/100):1):(s.opacity||1);
148     s.zoom=1;
149     s.filter="alpha(opacity="+parseInt(val*100)+")";
150     s.opacity=val;
151 };
152 
153 //透明度淡出函数
154 function hFadeOut(obj , time ,endFn){
155     obj.iNum = 0;
156     clearInterval(obj.hFadeTimer);
157     obj.hFadeTimer = setInterval(function(){
158         obj.iNum++;
159         //使用设置和读取透明度函数
160         hOpacity(obj,hOpacity(obj)-0.1);
161         //处理有些浏览器透明度不能到零的问题。
162         if(obj.iNum >= 10){
163             obj.style.opacity = 0;
164             obj.iNum = 0;
165         }
166         if(hGetStyle(obj, 'opacity') == 0){
167             clearInterval(obj.hFadeTimer);
168             endFn && endFn();
169         }
170     },time)
171 }
172 
173 
174 //获取当前并设置详细年月日期,设置第二个参数来确定获得的年月日详细情况
175 function hgetTime(iNum){
176     var hTime ={};
177     
178     var myTime = new Date();
179 
180     var iYear = myTime.getFullYear();
181     var iMonth = myTime.getMonth()+1;
182     var iDate = myTime.getDate();
183     var iWeek = myTime.getDay();
184     var iHours = myTime.getHours();
185     var iMin = myTime.getMinutes();
186     var iSec = myTime.getSeconds();
187     
188     if( iWeek === 0 ) iWeek = '星期日';
189     if( iWeek === 1 ) iWeek = '星期一';
190     if( iWeek === 2 ) iWeek = '星期二';
191     if( iWeek === 3 ) iWeek = '星期三';
192     if( iWeek === 4 ) iWeek = '星期四';
193     if( iWeek === 5 ) iWeek = '星期五';
194     if( iWeek === 6 ) iWeek = '星期六';
195     
196     //默认显示所有的年月日星期等详细的信息
197     if(iNum === 0 || typeof(iNum) == 'undefined'){
198         hTime.str = iYear+ '年' +iMonth+'月'+iDate+'日 '+iWeek+' '+ toTwo(iHours)+' : '+ toTwo(iMin)+' : '+ toTwo(iSec);
199     }else if(iNum === 1){
200         hTime.str = toTwo(iHours)+' : '+ toTwo(iMin)+' : '+ toTwo(iSec);
201     }else if(iNum === 2){
202         hTime.str = toTwo(iHours)+toTwo(iMin)+toTwo(iSec);
203     }
204 
205     function toTwo ( n ) {
206         return n < 10 ?  '0' + n : '' + n;
207     }
208     //时间戳
209     hTime.getTime = Math.floor( myTime.getTime()/1000 );
210     hTime.Hours = iHours;
211     hTime.Min = iMin;
212     hTime.Sec = iSec;
213     return hTime;
214 }
215 
216 //倒计时函数  NewTime 为倒计时截止时间 格式为: 'November 27,2015 22:3:0'
217 function hCountDown(obj ,NewTime , endFn){
218     /*
219      * 月份取值:January、February、March、April、May、June、July、August、September、October、November、December
220      * 时间转换公式: 
221      * 天:Math.floor(t/86400)
222      *    时:Math.floor(t%86400/3600)
223      *    分:Math.floor(t%86400%3600/60)
224      *    秒:t%60
225      *  获取时间对象:new Date()
226     - getFullYear
227     - getMonth
228     - getDate
229     - getDay
230      - getHours
231      - getMinutes
232      - getSeconds
233     - 时间戳:new Date().getTime()-返回从1970年1月1日到现在的毫秒数(UTC时间标准时间)
234      * */
235     var iNow = null;
236     var t = 0;
237     var str = '';
238     var timer = null;
239     
240     iNew = new Date( NewTime );
241 
242     clearInterval( timer );
243     
244     timer = setInterval (function (){
245         console.log(NewTime);
246         iNow = new Date();
247         t = Math.floor( ( iNew - iNow ) / 1000 );
248         if ( t >= 0 ) {
249             str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';
250             obj.innerHTML = str;    
251         } else {
252             clearInterval( timer );
253             endFn && endFn();
254         }
255     
256     }, 1000);
257 }
258 
259 //检查是否是数字
260 //charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
261 function hDetectNum(val){
262     var str = '';
263     for (var i = 0; i < val.length; i++) {
264         str = val.charCodeAt(i);
265         if(str < 47 || str > 57){
266             return false;
267         }
268     }
269     return true;
270 }
271 
272 function hShow(obj){
273     obj.style.display = 'block';
274 }
275 function hHide(obj){
276     obj.style.display = 'none';
277 }
278 //查找和替换函数   iNum = 1 时候为替换模式,val2 为'' 的时候为删除 val1 中的内容。
279 function hReplace(str , val1 , val2 , iNum){
280     var hReplace = {};
281     hReplace.flag = true;
282     hReplace.newStr = '';
283     
284     function strIndexOf(){
285         if(str.indexOf(val1) === -1){
286             hReplace.flag = false;
287             return hReplace;
288         }
289     }
290     if(typeof(val2) === 'undefined'){
291         strIndexOf();
292          hReplace.newStr = str.split(val1).join('<span style="background:yellow;">'+ val1 +'</span>');
293     }else if(iNum === 1){
294         strIndexOf();
295         hReplace.newStr = str.split(val1).join('<span style="background:yellow;">'+ val2 +'</span>');
296     }
297     
298     return hReplace;
299 }
300 
301 //获取元素距离浏览器的距离
302 function hGetPos(obj){
303     var pos = {left:0,top:0};
304     while (obj){
305         pos.left += obj.offsetLeft;
306         pos.top += obj.offsetTop;
307         obj = obj.offsetParent;
308     }
309     return pos;
310 }
原文地址:https://www.cnblogs.com/wanqiu/p/4452711.html