js工具类

更新日期: 2019-12-03阅读: 2.4k标签: 工具

代码如下:

/**
 * 整个body显示半透明的遮罩层
 */
function showWindow(){
	var mask=document.createElement("div");
	var W=$(document).width();
	var H=$(document).height();
	mask.id="mask";
	mask.style.cssText="position:absolute;z-index:5;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
	document.body.appendChild(mask);
}

/**
 * 给指定的div显示半透明的遮罩层
 * params param 是class(needModal)
 */
function showModal(param,isAll){
	var array = $(param);
	if(array && array.length > 0){
		for(var i = 0 ;i< array.length; i++){
			var mask=document.createElement("div");
			var W1 = 0;
			var H1 = 30;
			if(!isAll){
				W1 = 16;//留出滚动条(让滚动条可以不被覆盖,能够拖动,费率参数页面)
				H1 = 30;//让费率参数页面完全被覆盖(因为有滚动条,所以被覆盖的div的实际大小会超出范围)
			}
			var W=$(array[i]).width()-W1;
			var H=$(array[i]).height()+H1;
			mask.id="mask";
			mask.style.cssText="position:absolute;z-index:5;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
			$(array[i]).append(mask);
		}
	}
}

/**
 * 清除显示半透明的遮罩层
 * params param 是class(needModal)
 */
function clearModal(param){
	var array = $(param);
	if(array && array.length > 0){
		for(var i = 0 ;i< array.length; i++){
			$(array[i]).find('#mask').remove();
		}
	}
}

/**
 * 给指定的div显示半透明的遮罩层
 * params param 是class(needModal)
 */
function showModalForDjcsPage(param){
	var array = $(param);
	if(array && array.length > 0){
		for(var i = 0 ;i< array.length; i++){
			var mask=document.createElement("div");
			var W=$(array[i]).width();
			var H=$(array[i]).height();
			mask.id="mask";
			mask.style.cssText="position:absolute;z-index:5;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
			$(array[i]).append(mask);
		}
	}
}
function showModalForWidth(param){
	var array = $(param);
	var width = 0;
	if(array && array.length > 0){
		for(var i = 0 ;i< array.length; i++){
			var mask=document.createElement("div");
			//设定遮罩层所占的宽度
			var W=$(array[i]).width();
			var H=$(array[i]).height()+30;
			mask.id="mask"+[i];
			//设定遮罩层的绝对位置的起始点(从哪里开始遮罩层--->left属性,遮罩层的宽度等于该元素的宽度)
//			width = W+width;
			//1.<div class="needModal">这个是可以的,但是需要每个要添加覆盖层的区域都需要套上一个div,而且要给这个div添加上class="needModal",在给这个元素添加遮罩层的时候,因为它没有relative属性,所以添加的时候是从左侧left=0开始添加遮罩层
//			mask.style.cssText="position:absolute;z-index:5;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:"+W+";";
			//2.给该覆盖层加上relative样式:<div class="needModal" style="position: relative;">,那么在给该元素添加遮罩层的时候,absolute绝对定位会从当前的这个元素(position: relative)开始添加遮罩层,而不是从左侧添加遮罩层
			mask.style.cssText="position:absolute;z-index:5;width:"+W+"px;height:"+H+"px;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
			$(array[i]).append(mask);
		}
	}
}

/**
 * 将数字每三位分割
 * @param num
 * @returns
 */
function formatNumber(num) {
    if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(num)) {
        return num;
    }
    var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
    var re = new RegExp("(\\d)(\\d{3})(,|$)");
    while (re.test(b))   b = b.replace(re, "$1,$2$3");
    var value = addChineseUnit(num, 5);
    var content = '';   
    var abValue = value +'';   
    if(value != undefined){      
//    	if(value.length>=22) {         
//    		abValue = value.substring(0,19) + "...";         
//    		content = '<a href="javascript:;"  title="' + chineseUnit + '" class="easyui-tooltip">' + abValue + '</a>';      
//    	}else{         
//    		content = '<a href="javascript:;"  title="' + abValue + '" class="easyui-tooltip">' + abValue + '</a>';      
//    	}   
    	content = '<a href="#" title="' + value + '" class="easyui-tooltip easyui-linkbutton" style="text-decoration: none">' + (a + "" + b + "" + c) + '</a>';
    }   
    return content;
}

/**
 * 为数字加上单位:万或亿
 *
 * 例如:
 *      1000.01 => 1000.01
 *      10000 => 1万
 *      99000 => 9.9万
 *      566000 => 56.6万
 *      5660000 => 566万
 *      44440000 => 4444万
 *      11111000 => 1111.1万
 *      444400000 => 4.44亿
 *      40000000,00000000,00000000 => 4000万亿亿
 *      4,00000000,00000000,00000000 => 4亿亿亿
 *
 * @param {number} number 输入数字.
 * @param {number} decimalDigit 小数点后最多位数,默认为2
 * @return {string} 加上单位后的数字
 */
function addChineseUnit(number, decimalDigit) {
    var addWan = function(integer, number, mutiple, decimalDigit) {
        var digit = getDigit(integer);
        if (digit > 3) {
            var remainder = digit % 8;
            if (remainder >= 5) {   // ‘十万’、‘百万’、‘千万’显示为‘万’
                remainder = 4;
            }
            return Math.round(number / Math.pow(10, remainder + mutiple - decimalDigit)) / Math.pow(10, decimalDigit) + '万';
        } else {
            return Math.round(number / Math.pow(10, mutiple - decimalDigit)) / Math.pow(10, decimalDigit);
        }
    };

    var getDigit = function(integer) {
        var digit = -1;
        while (integer >= 1) {
            digit++;
            integer = integer / 10;
        }
        return digit;
    };

    return function(number, decimalDigit) {
        decimalDigit = decimalDigit == null ? 2 : decimalDigit;
        var integer = Math.floor(number);
        var digit = getDigit(integer);
        // ['个', '十', '百', '千', '万', '十万', '百万', '千万'];
        var unit = [];
        if (digit > 3) {
            var multiple = Math.floor(digit / 8);
            if (multiple >= 1) {
                var tmp = Math.round(integer / Math.pow(10, 8 * multiple));
                unit.push(addWan(tmp, number, 8 * multiple, decimalDigit));
                for (var i = 0; i < multiple; i++) {
                    unit.push('亿');
                }
                return unit.join('');
            } else {
                return addWan(integer, number, 0, decimalDigit);
            }
        } else {
            return number;
        }
    }(number, decimalDigit);
}

/**
 * 加入遮盖层
 * @returns
 */
function setModulFun(){
	var mask=document.createElement("div");
	var W=$('document').width()-16;
	var H=$('document').height()+30;
	mask.id="modulMask";
	mask.style.cssText="position:absolute;z-index:9999;width:100%;height:100%;background:#ccc;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;";
	document.body.appendChild(mask);
}

/**
 * 结束遮盖
 * @returns
 */
function endModulFun(){
	$('#modulMask').remove();
}

/**
 * 删除菜单
 * @param name
 * @param menuId
 */
function deleteMenu(name,menuId){
	var item = $(menuId).menu('findItem', name);
	if(item){
		$(menuId).menu('removeItem', item);
	}
}

/**
 * 添加菜单
 * @param name
 * @param fun
 * @param menuId
 */
function addMenu(name,fun,menuId,iconCls){
	var item = $(menuId).menu('findItem', name);
	if(!item){
		$(menuId).menu('appendItem', {
			text: name,
			iconCls: iconCls,
			onclick: fun,
		});
	}
}

/**  
 * layout方法扩展  
 * @param {Object} jq  
 * @param {Object} region  
 */  
$.extend($.fn.layout.methods, {   
    /**  
     * 面板是否存在和可见  
     * @param {Object} jq  
     * @param {Object} params  
     */  
    isVisible: function(jq, params) {   
        var panels = $.data(jq[0], 'layout').panels;   
        var pp = panels[params];   
        if(!pp) {   
            return false;   
        }   
        if(pp.length) {   
            return pp.panel('panel').is(':visible');   
        } else {   
            return false;   
        }   
    },   
    /**  
     * 隐藏除某个region,center除外。  
     * @param {Object} jq  
     * @param {Object} params  
     */  
    hidden: function(jq, params) {   
        return jq.each(function() {   
            var opts = $.data(this, 'layout').options;   
            var panels = $.data(this, 'layout').panels;   
            if(!opts.regionState){   
                opts.regionState = {};   
            }   
            var region = params;   
            function hide(dom,region,doResize){   
                var first = region.substring(0,1);   
                var others = region.substring(1);   
                var expand = 'expand' + first.toUpperCase() + others;   
                if(panels[expand]) {   
                    if($(dom).layout('isVisible', expand)) {   
                        opts.regionState[region] = 1;   
                        panels[expand].panel('close');   
                    } else if($(dom).layout('isVisible', region)) {   
                        opts.regionState[region] = 0;   
                        panels[region].panel('close');   
                    }   
                } else {   
                    panels[region].panel('close');   
                }   
                if(doResize){   
                    $(dom).layout('resize');   
                }   
            };   
            if(region.toLowerCase() == 'all'){   
                hide(this,'east',false);   
                hide(this,'north',false);   
                hide(this,'west',false);   
                hide(this,'south',true);   
            }else{   
                hide(this,region,true);   
            }   
        });   
    },   
    /**  
     * 显示某个region,center除外。  
     * @param {Object} jq  
     * @param {Object} params  
     */  
    show: function(jq, params) {   
        return jq.each(function() {   
            var opts = $.data(this, 'layout').options;   
            var panels = $.data(this, 'layout').panels;   
            var region = params;   
  
            function show(dom,region,doResize){   
                var first = region.substring(0,1);   
                var others = region.substring(1);   
                var expand = 'expand' + first.toUpperCase() + others;   
                if(panels[expand]) {   
                    if(!$(dom).layout('isVisible', expand)) {   
                        if(!$(dom).layout('isVisible', region)) {   
                            if(opts.regionState[region] == 1) {   
                                panels[expand].panel('open');   
                            } else {   
                                panels[region].panel('open');   
                            }   
                        }   
                    }   
                } else {   
                    panels[region].panel('open');   
                }   
                if(doResize){   
                    $(dom).layout('resize');   
                }   
            };   
            if(region.toLowerCase() == 'all'){   
                show(this,'east',false);   
                show(this,'north',false);   
                show(this,'west',false);   
                show(this,'south',true);   
            }else{   
                show(this,region,true);   
            }   
        });   
    }   
}); 
/**
 * 隐藏被禁用的菜单
 * @param jq
 */
function getContentMenuFun(jq){
	var menuDom = jq.parent().find(".menu-top.menu:visible");
	var $item = menuDom.children(".menu-item-disabled");
	var $sep = menuDom.find('.menu-sep');
	if($item.length >0 ){
		$item.hide();
		menuDom.height(menuDom.height() - $item.length*22);
		menuDom.next().remove();
	}
	if($sep.length >0){
		for(var i = $sep.length-1;i>=0;i--){
			var $current = $($sep[i]);
			removeTogetherMenuSepFun($current,menuDom);
		}
	}
}


/**
 * 移除多余的菜单分隔符
 * @param current
 * @param menuDom
 * @param falg 用来标记两个分割线之间有没有正常可见的菜单项
 */
function removeTogetherMenuSepFun($current,menuDom){
	var $prevAll = $current.prevAll();
	if($prevAll){
		var flag = false;//假设该分割线是要隐藏的
		for(var i = 0;i<$prevAll.length;i++){
			var prevDom = $prevAll[i];
			if($(prevDom).hasClass("menu-sep")){
				break;
			}
			if($(prevDom).is(':visible')){
				flag = true;
			}
		}
		if(!flag){
			$current.hide();
		}
	}
}

function hidenOrShowMenuFun(easyuiDom,isTree,row,$dom,dblClickRowMenuIndex){
	var menuObj = createMenu(true);
	var newMenu = hiddenRightMenu(menuObj,row,dblClickRowMenuIndex,easyuiDom);
	easyuiDom.treegrid('options').rowContextMenu = newMenu;
	if($dom && $dom.length > 0){
		newMenu = hiddenRightMenu($dom.menu("options").items);
		$dom.menu("options").items = newMenu;
	}
}

function hiddenRightMenu(oldMenu,row,dblClickRowMenuIndex,easyuiDom){
	if(oldMenu){
		var text = null;
		for(var i = oldMenu.length-1;i >= 0;i--){
			if(oldMenu[i].disabled && $.isFunction(oldMenu[i].disabled)){
				var disable = oldMenu[i].disabled(null,row);
				if(typeof(menuFlag) != 'undefined' && menuFlag){
					oldMenu[0].children[1].text = "子预算文件";
				}
				if(disable){
					oldMenu.splice(i, 1);
				}
				if(dblClickRowMenuIndex && dblClickRowMenuIndex == i){
					if(disable){
						easyuiDom.treegrid('options').dblClickRowMenuIndex = undefined;
						continue;
					}
					text = oldMenu[i];
				}
			}
		}
		if(text){
			for(var i = 0;i < oldMenu.length;i++){
				if(oldMenu[i] == text){
					easyuiDom.treegrid('options').dblClickRowMenuIndex = i;
				}
			}
		}
	}
	return oldMenu;
} 

/**
 * 初始化菜单项 
 */
function setMenuHeight(){
	var menus = $('.menu');
	for(var i = 0;i < menus.length;i++){
		var $menu = $(menus[i]);
		var menuHeight = $menu.height();
		var items = $menu.find('.menu-item:not([style*="display: none"])');
		if(items.length > 0 && menuHeight == 0){
			var unitHeight = 22;
			$menu.height(unitHeight*items.length+"px");
		}
	}
}

/**
 * 字段悬浮提示的一般方法
 * @param title 超链接悬浮显示的内容
 * @param contentVal 超链接文本中内容
 */
function defaultFormatter(title,contentVal){
	var returnVal = "";
	if(!contentVal){
		contentVal = title;
	}
	returnVal = '<a href="#" title="' + value + '" style="text-decoration: none;color:#000000;cursor:default;" class="easyui-tooltip easyui-linkbutton">' + contentVal + '</a>';
	return returnVal;
}

/** 
 * js截取字符串,中英文都能用 
 * @param str:需要截取的字符串 
 * @param len: 需要截取的长度 
 */
function cutstr(str, len) {
    var str_length = 0;
    var str_len = 0;
    str_cut = new String();
    str_len = str.length;
    for (var i = 0; i < str_len; i++) {
        a = str.charAt(i);
        str_length++;
        if (escape(a).length > 4) {
            //中文字符的长度经编码之后大于4  
            str_length++;
        }
        str_cut = str_cut.concat(a);
        if (str_length >= len) {
            str_cut = str_cut.concat("...");
            return str_cut;
        }
    }
    //如果给定字符串小于指定长度,则返回源字符串;  
    if (str_length < len) {
        return str;
    }
}

/**
 * 获得字符串实际长度,中文2,英文1</summary>
 */
var GetLength = function (str) {
    ///<param name="str">要获得长度的字符串</param>
    var realLength = 0, len = str.length, charCode = -1;
    for (var i = 0; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode >= 0 && charCode <= 128) realLength += 1;
        else realLength += 2;
    }
    return realLength;
};

//除法函数,用来得到精确的除法结果
//说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用:accDiv(arg1,arg2)
//返回值:arg1除以arg2的精确结果
function accDiv(arg1,arg2){
	var t1=0,t2=0,r1,r2;
	try{
		t1=arg1.toString().split(".")[1].length;
	}catch(e){
	}
	try{
		t2=arg2.toString().split(".")[1].length;
	}catch(e){
	}
	with(Math){
		r1=Number(arg1.toString().replace(".",""));
		r2=Number(arg2.toString().replace(".",""));
		return (r1/r2)*pow(10,t2-t1);
	}
}

//给Number类型增加一个div方法,调用起来更加方便。
Number.prototype.div = function (arg){
	return accDiv(this, arg);
}

//乘法函数,用来得到精确的乘法结果
//说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用:accMul(arg1,arg2)
//返回值:arg1乘以arg2的精确结果
function accMul(arg1,arg2){
	var m=0,s1=arg1.toString(),s2=arg2.toString();
	try{
		m+=s1.split(".")[1].length;
	}catch(e){
	}
	try{
		m+=s2.split(".")[1].length;
	}catch(e){
	}
	return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}

//给Number类型增加一个mul方法,调用起来更加方便。
Number.prototype.mul = function (arg){
	return accMul(arg, this);
}

//加法函数,用来得到精确的加法结果
//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用:accAdd(arg1,arg2)
//返回值:arg1加上arg2的精确结果
function accAdd(arg1,arg2){
	var r1,r2,m;
	try{
		r1=arg1.toString().split(".")[1].length;
	}catch(e){
		r1=0;
	}
	try{
		r2=arg2.toString().split(".")[1].length;
	}catch(e){
		r2=0;
	}
	m=Math.pow(10,Math.max(r1,r2));
	return (arg1*m+arg2*m)/m;
}

//给Number类型增加一个add方法,调用起来更加方便。
Number.prototype.add = function (arg){
	return accAdd(arg,this);
}

/**
 * 获取新的url
 * @param obj 新的参数值构成的对象
 * @returns
 */
function getNewUrlParms(url,obj)    {
	 var theRequest = new Object();
     if (!url)
         url = location.href;
     if (url.indexOf("?") !== -1)
     {
         var str = url.substr(url.indexOf("?") + 1) + "&";
         var strs = str.split("&");
         for (var i = 0; i < strs.length - 1; i++)
         {
             var key = strs[i].substring(0, strs[i].indexOf("="));
             var val = strs[i].substring(strs[i].indexOf("=") + 1);
             theRequest[key] = val;
         }
     }
     for(var key in obj){
    	 theRequest[key] = obj[key];
     }
     var head = url.substr(0,url.indexOf("?"));
     var appendUrl = $.param(theRequest);
     var newUrl = head+"?"+appendUrl;
     return newUrl;
}

/**
 * 判断字符串是否以指定字符结尾
 */
String.prototype.endWith=function(endStr){
	  var d=this.length-endStr.length;
	  return (d>=0&&this.lastIndexOf(endStr)==d);
}

/**
 * 判断是否为中文
 * @param s
 * @returns
 */
function isChina(s){  //判断字符是否是中文字符 
	var patrn= /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; 
	if (!patrn.exec(s)) { 
		return false; 
	}else{ 
		return true; 
	} 
} 

/**
 * 如果数字以0开头,那么去除前面的0
 * 如果是算式,那么返回算式的值
 * @param formula
 * @param cale
 * @returns
 */
function parseNumFun(formula,cale){
	var returnVal = formula;
	var reg=/^0*\d+(\.\d+)?$/;
	if(!reg.test(formula)){
		//非数字或者非以0开头的数字
		returnVal = parseFloat(eval("("+formula+")")).toFixed(cale)
	}else{
		if(formula.indexOf("0") == 0){
			//如果以"0"开头
			formula = (~~formula);
		}else{
			//如果不是以0开头,而是正常的数字
			returnVal = formula;
		}
	}
	returnVal = parseFloat(returnVal);
	return returnVal;
}

/**
 * 判断一个对象是否没有自定义属性,为一个空对象
 * @returns
 */
function isEmptyObj(obj){
	return JSON.stringify(obj) == '{}';
}


链接: https://fly63.com/article/detial/7132

常用的前端开发者的工具、库和资源

这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。

web前端程序员代码编辑器推荐

今天给大家分享前端程序员最爱用的代码编辑器,来看看你用哪款?包括:Visual Studio Code、Atom、HBuilder、Sublime Text、Dreamweaver、Brackets、Notepad++

JavaScript常用工具方法封装

Js常用工具方法封装:type 类型判断、Date、Array、String 字符串操作、Number、Http、DOM、Other 其它操作

Node.js 命令行工具的编写

日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段

一百行js代码实现一个校验工具

做过校验需求的小伙伴们都知道,校验其实是个麻烦事。规则多,需要校验的字段多,都给我们前端带来巨大的工作量。一个不小心,代码里就出现了不少if else等不可维护的代码。因此,我觉得一个团队或者是一个项目

Licia 支持小程序的 JS 工具库

Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,同时支持浏览器、node 及小程序运行环境,提供了包括日期格式化、md5、颜色转换等实用模块,可以极大地提高开发效率。

程序员常用命令行工具

WordGrinder它是一款使用起来很简单,但拥有足够的编写和发布功能的文字编辑器。Proselint:它是一款全能的实时检查工具。GNU Aspell:

Web前端开发工程师常用的工具!

工欲善其身必先利器,作为前端行业的你,如果知道一些好用的软件工具可以帮助他们更好的工作。下面,就给大家分享Web前端开发工程师常用的工具。

用100行代码,完成自己的前端构建工具!

ES2017+,你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具,可以脑海中永远划掉。100行代码,你将透视构建工具的本质。

欺骗技术13款开源工具分享

一旦被那些受利益驱使或有政府背景的黑客团伙盯上,在这场不太公平的攻防博弈中,你会明显感到力不从心。他们有充足的时间,有娴熟的技术和丰富的资源,而且只要在无数次的尝试中成功一次就可以大获全胜

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!