工具函数之JS

1. 判断元素是否有滚动条

 1 /*
 2 检测元素是否出现滚动条
 3 
 4 @param [object HTMLElement] elm The HTMLElement object
 5 @return [Object] The Object contains result
 6 
 7 原理：
 8 1. 浏览器在没有滚动条的时候，scrollLeft/scrollTop赋值后不会发生变化，始终是0；
 9 2. scrollLeft，scrollTop为负数值时会报错
10 
11 Usage:
12 var scrollObj = scrollDetect(document.documentElement);
13 scrollObj.isScrollX  true：有横向滚动条 false：无横向滚动条
14 scrollObj.isScrollY  true：有纵向滚动条 false：无纵向滚动条
15 */
16 function scrollDetect(elm) {
17     var tmp,
18         scrollX = false,
19         scrollY = false;
20 
21     //Test horizontal scroll
22     tmp = elm.scrollLeft;
23     elm.scrollLeft += (tmp > 0) ? -1 : 1;
24     elm.scrollLeft !== tmp && (scrollX = scrollX || true);
25     elm.scrollLeft = tmp;
26 
27     //Test vertical scroll
28     tmp = elm.scrollTop;
29     elm.scrollTop += (tmp > 0) ? -1 : 1;
30     elm.scrollTop !== tmp && (scrollY = scrollY || true);
31     elm.scrollTop = tmp;
32 
33 
34     return {
35         'isScrollX': scrollX,
36         'isScrollY': scrollY
37     };
38 }

 

2. 获取浏览器滚动条宽度 

 1 /*
 2 获取浏览器滚动条宽度
 3 
 4 @return [Number] The browser's scrollbar width.
 5 
 6 原理：
 7 1. 向页面插入一个看不到的元素A，并设置它的宽度w，自身显示滚动条；
 8 2. 浏览器滚动条的宽度 = w - 元素A的clientWidth
 9 
10 Usage:
11 var scrollBarWidth = getScroallBarWidth();
12 */
13 function getScrollBarWidth() {
14     var testElm, tmp;
15 
16     testElm = document.createElement('div');
17     testElm.style.cssText = "position:absolute;width:50px;height:50px;top:-1000px;overflow-y:scroll;";
18     document.body.appendChild(testElm);
19 
20     tmp = testElm.clientWidth;
21     document.body.removeChild(testElm);
22     return 50 - tmp;
23 }

 

3. 日期时间格式化函数 

 1 /*
 2 格式化日期时间函数
 3 
 4 @param [Date] dateObj The Date object.
 5 @param [String] format The formated datetime template string.
 6 @return [String] The formated datetime string.
 7 
 8 Usage:
 9 dateFormat(new Date(), 'YYYY年MM月dd日hh小时mm分ss秒');
10 2014年08月09日11小时22分27秒 
11 */
12 
13 function dateFormat(dateObj, format) {
14     var o = {
15         "M+": dateObj.getMonth() + 1, //month
16         "d+": dateObj.getDate(), //day
17         "h+": dateObj.getHours(), //hour
18         "m+": dateObj.getMinutes(), //minute
19         "s+": dateObj.getSeconds(), //second
20     }
21 
22     if (/(Y+)/.test(format)) {
23         format = format.replace(RegExp.$1, (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length));
24     }
25 
26     for (var k in o) {
27         if (o.hasOwnProperty(k)) {
28             if (new RegExp("(" + k + ")").test(format)) {
29                 format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
30             }
31         }
32 
33     }
34     
35     return format;
36 }

 

总结项目中经常用到的通用工具函数。

posted @ 2014-07-26 16:38  周文洪  阅读(245)  评论(0)  编辑  收藏  举报