工具函数之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 }

 

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