JavaScript 代码

[chuiliu]

• 生成大于等于min，小于等于max的随机整数[min, max]

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

• 去除首尾空格

function trim(str) {
    return str.replace(/(^\s*)|(\s*$)/g, '');
}

• 计算文件大小

    function getFileSize(size) {
        if (Math.floor(size / (1024 * 1024)) > 0) {
            return Math.ceil(size / (1024 * 1024) * 100) / 100 + 'M';
        } else if (Math.floor(size / 1024 > 0)) {
            return Math.ceil(size / 1024 * 100) / 100 + 'K';
        }
        return size + 'B';
    }

• 获取querystring

function getQueryString(parm) {
  var reg = new RegExp('(^\|&)' + parm + '=([^&]*)(&\|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  
  if (r != null) return unescape(r[2]);
  return null;
}

• 获取scrollTop

var scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);

var scrollTop = document.documentElement.scrollTop || document.body.scrolTop;

• 回顶部

(function() {
        var el = document.getElementById('totop');
        var getScrollTop = function() {
            return document.documentElement.scrollTop || document.body.scrollTop;
        };
        var setScrollTop = function(value) {
            document.documentElement.scrollTop ? document.documentElement.scrollTop = value : document.body.scrollTop = value;
        };
        window.onscroll = function() {
            getScrollTop() > 300 ? el.style.display = 'block' : el.style.display = 'none';
        };
        el.addEventListener('click', function() {
            var timer = setInterval(backToTop, 10);
            function backToTop() {
                setScrollTop(getScrollTop() * 0.9);
                if (getScrollTop() < 1) {
                    clearInterval(timer);
                }
            }
        }, false);
    })();

• 简单粗暴判断元素是否在可视区域

var isVisible = el.getBoundingClientRect().bottom >= 0 && el.getBoundingClientRect().top <= window.innerHeight;

// 另一种实现：
var el = document.getElementById('box');
var winHeight = window.innerHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var offsetTop = el.offsetTop;
var height = el.offsetHeight;

var isVisible = offsetTop < winHeight + scrollTop && offsetTop + height > scrollTop;

• 获取元素的样式

function getStyle(el, attr) {
            return typeof getComputedStyle === 'function' ? getComputedStyle(el)[attr] : el.currentStyle[attr];
        }

• 获取元素到页面顶部的距离

function getTop(el) {
            var top = el.offsetTop;
            while (el.offsetParent) {
                el = el.offsetParent;
                top += el.offsetTop;
                if (el && el !== document.body) {
                    var borderTopWidth = typeof getComputedStyle === 'function' 
                        ? getComputedStyle(el)['border-top-width']
                        : el.currentStyle['border-top-width'];
                    borderTopWidth = parseFloat(borderTopWidth);
                    top += borderTopWidth;
                }
            }
            return top;
        };

• 获取浏览器滚动条宽度

function getScrollbarWidth() {
    var scrollbarWidth;
    var tempEl = document.createElement('div');
    var innerEl = document.createElement('div');
    tempEl.style.overflow = 'scroll';
    document.body.appendChild(tempEl);
    tempEl.appendChild(innerEl);
    scrollbarWidth = tempEl.offsetWidth - innerEl.offsetWidth;
    document.body.removeChild(tempEl);
    return scrollbarWidth;
}