代码如下:
/**
* 整个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) == '{}';
}
这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。
今天给大家分享前端程序员最爱用的代码编辑器,来看看你用哪款?包括:Visual Studio Code、Atom、HBuilder、Sublime Text、Dreamweaver、Brackets、Notepad++
Js常用工具方法封装:type 类型判断、Date、Array、String 字符串操作、Number、Http、DOM、Other 其它操作
日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段
做过校验需求的小伙伴们都知道,校验其实是个麻烦事。规则多,需要校验的字段多,都给我们前端带来巨大的工作量。一个不小心,代码里就出现了不少if else等不可维护的代码。因此,我觉得一个团队或者是一个项目
Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,同时支持浏览器、node 及小程序运行环境,提供了包括日期格式化、md5、颜色转换等实用模块,可以极大地提高开发效率。
WordGrinder它是一款使用起来很简单,但拥有足够的编写和发布功能的文字编辑器。Proselint:它是一款全能的实时检查工具。GNU Aspell:
工欲善其身必先利器,作为前端行业的你,如果知道一些好用的软件工具可以帮助他们更好的工作。下面,就给大家分享Web前端开发工程师常用的工具。
ES2017+,你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具,可以脑海中永远划掉。100行代码,你将透视构建工具的本质。
一旦被那些受利益驱使或有政府背景的黑客团伙盯上,在这场不太公平的攻防博弈中,你会明显感到力不从心。他们有充足的时间,有娴熟的技术和丰富的资源,而且只要在无数次的尝试中成功一次就可以大获全胜
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!