一些常用的JS功能函数代码

作者:拾光时间:2026-10-23 19:09:22浏览:635

本文整理了一系列常用的JavaScript实用功能函数,涵盖DOM元素获取、相对路径计算、动态加载JS/CSS文件、表单控件(下拉框、单选、复选框)状态设置、图片上传预览及大小检测、客户端环境信息获取以及字符串处理等常见开发场景,旨在提供可直接复用的代码片段以提升开发效率。

代码如下:

DOM元素获取与路径计算// 获取DOM元素对象
function getObject(objectId, top)
{ 
var doc = top ? window.top.document : document;
if (typeof(objectId) != "object" && typeof(objectId) != "function")
{ 
if (doc.getElementById && doc.getElementById(objectId))
{ 
// 兼容W3C DOM标准
return doc.getElementById(objectId);
} 
else if (doc.getElementsByName(objectId))
{ 
return doc.getElementsByName(objectId)[0];
} 
else if (doc.all && doc.all(objectId))
{ 
// 兼容MSIE 4 DOM
return doc.all(objectId);
} 
else if (doc.layers && doc.layers[objectId])
{ 
// 兼容NN 4 DOM(注意:此方法无法查找嵌套层)
return doc.layers[objectId];
} 
else
{ 
return false;
} 
else
return objectId;
} 
// 计算当前URL的相对路径
function getRelativePath()
{ 
var url = location.href; // 获取当前完整URL
var urlcs = String(location.search); // 获取查询字符串
url = url.replace(urlcs, ""); // 去除查询字符串
var path = url.length - url.replace(/\//g, "").length - 3; // 计算路径层级:总长度减去斜杠数量再减去项目根目录的斜杠数
var str = "";
for (var i = 0; i < path; i++)
{ 
str += "../"; // 拼接相对路径字符串
} 
return str;
} 
动态加载脚本与样式文件// 动态加载外部JS文件或CSS文件
function loadjscssfile(filename, filetype, chkonce)
{ 
filetype = !filetype ? "js" : filetype; // 默认类型为js
var had = false;
if (filetype == "js")
{ 
if (chkonce)
{ 
var allScripts = document.getElementsByTagName("script");
for (var i = 0; i < allScripts.length; i++)
{ 
try {
if (allScripts[i].src.indexOf(filename) > -1)
{ 
had = true;
break;
} 
} catch (e) {}
} 
} 
if (!had)
{ 
document.write("<script src=\"" + filename + "\" type='text/javascript'></script>");
} 
else
{ 
if (chkonce)
{ 
var allCss = document.getElementsByTagName("link");
if (allCss.length)
{ 
for (var i = 0; i < allCss.length; i++)
{ 
try {
if (allCss[i].href.indexOf(filename) > -1)
{ 
had = true;
break;
} 
} catch (e) {}
} 
} 
} 
if (!had)
{ 
document.write("<link type='text/css' rel='stylesheet' href=\"" + filename + "\" />");
} 
} 
} 
// 定义项目根目录及各资源路径变量
var ROOT_PATH = getRelativePath();
var JS_PATH = ROOT_PATH + 'js/';
var AJAX_PATH = ROOT_PATH + 'ajax/';
var CSS_PATH = ROOT_PATH + 'css/';
var IMAGES_PATH = ROOT_PATH + 'images/';
var EDITOR_PATH = ROOT_PATH + 'uploadeditor/';
var PUB_PATH = ROOT_PATH + 'uploadfile/';
// 加载公共变量配置文件
loadjscssfile(JS_PATH + "globalPara.js");
表单控件状态设置与快捷输入// 设置下拉列表(select)中指定值的项为选中状态
function setSelOption(objId, vlu)
{ 
objId = getObject(objId);
for (var i = 0; i < objId.options.length; i++)
{ 
if (objId.options[i].value == vlu)
{ 
objId.options[i].setAttribute("selected", "selected");
break;
} 
} 
} 
// 根据下拉列表(select)的文本内容设置指定项为选中状态
function setTxtOption(objId, txt)
{ 
objId = getObject(objId);
for (var i = 0; i < objId.options.length; i++)
{ 
if (objId.options[i].innerHTML == txt)
{ 
objId.options[i].setAttribute("selected", "selected");
break;
} 
} 
} 
// 设置单选按钮组(radio)中指定值的项为选中状态
function setSelRadio(objName, vlu)
{ 
objName = document.getElementsByName(objName);
for (var i = 0; i < objName.length; i++)
{ 
if (objName[i].value == vlu)
{ 
objName[i].setAttribute("checked", "checked");
break;
} 
} 
} 
// 根据ID前缀和值列表设置复选框(checkbox)中多项被选中
// vlu 格式示例:'1,2,3'
function setSelCheckbox(prefix, vlu)
{ 
var _arr = vlu.split(",");
if (_arr != "")
{ 
for (var i = 0; i < _arr.length; i++)
{ 
getObject(prefix + _arr[i]).checked = true;
} 
} 
} 
// 快捷输入功能:从源对象取值填入目标对象
function fastInput(fromObj, toObjId, txt)
{ 
if (fromObj.value == '' || fromObj.value == 0) return false;
txt = !txt ? false : txt;
var toObj = getObject(toObjId);
if (txt)
{ 
if (typeof(toObj.value) == 'undefined')
toObj.innerHTML = toTxt(fromObj.options[fromObj.selectedIndex].innerHTML);
else
toObj.value = toTxt(fromObj.options[fromObj.selectedIndex].innerHTML);
else
{ 
if (typeof(toObj.value) == 'undefined')
toObj.innerHTML = fromObj.value;
else
toObj.value = fromObj.value;
} 
} 
/* 
IE环境下图片上传预览与大小检测// IE6, IE7 环境下上传图片前的图片预览功能
// 在IE6下还可同时检测图片大小
// size 参数单位为KB
<style type="text/css"><!--
.newPreview
{ 
width:400px; height:300px;
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
} 
.nodis{display:none;}
--></style><style type="text/css" bogus="1">
.newPreview
{ 
width:400px; height:300px;
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
} 
.nodis{display:none;}</style>
<input type="file" name="litpic" onchange="PreviewImg(this,'newPreview','ndsPreview',400)" />
<div id="newPreview" class="newPreview"></div>
<img id="ndsPreview" class="nodis" />
*/ 
function PreviewImg(imgFile, newPreview, ndsPreview, size)
{ 
newPreview = getObject(newPreview);
if (!imgFile || !imgFile.value || !newPreview) return;
var patn = /\.jpg$|\.jpeg$|\.gif$|\.png$|\.bmp$/i;
if (patn.test(imgFile.value))
{ 
try { newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; } catch (e) {}
if (navigator.appVersion.indexOf("MSIE 6.0", 0) > -1)
{ 
size = !size ? 0 : size;
ndsPreview = getObject(ndsPreview);
if (ndsPreview)
{ 
try { ndsPreview.attachEvent("onreadystatechange", function () { checkImgSize(ndsPreview, size) }); } catch (e) {}
ndsPreview.src = imgFile.value;
} 
} 
} 
else
{ 
alert("您选择的不是图像文件,请重新选择.");
} 
} 
function PreviewImgNow(imgDiv, imgFile)
{ 
try { getObject(imgDiv).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile; } catch (e) {}
} 
// 上传前检测图片大小
// 需在file元素onchange事件中触发,将缩略图显示在img标签上
// size 参数单位为KB
function checkImgSize(img, size)
{ 
img = getObject(img);
if (img.readyState == "complete")
{ 
var limit = size * 1024;
if (img.fileSize > limit)
{ 
alert("出错!您上传的图片大小为" + (parseInt(img.fileSize / 1024)) + "KB,超过了" + size + "KB的限制,请重新上传");
return false;
else
return true;
} 
return true;
} 
客户端环境信息检测与浏览器兼容处理// 检测客户端浏览器及操作系统环境信息
function ClientMentInfo()
{ 
var me = this;
var appVer = navigator.userAgent;
this.GetBrowserName = function () {
if (appVer.indexOf("MSIE") > 0) return "IE";
else if (appVer.indexOf("Firefox") > 0) return "Firefox";
else if (appVer.indexOf("Chrome") > 0) return "Chrome";
else if (appVer.indexOf("Safari") > 0) return "Safari";
else if (appVer.indexOf("Camino") > 0) return "Camino";
else if (appVer.indexOf("Konqueror") > 0) return "Konqueror";
else return "其它";
} 
this.GetOSInfo = function () {
var _pf = navigator.platform;
if (_pf == "Win32" || _pf == "Windows")
{ 
if (appVer.indexOf("Windows NT 6.0") > -1 || appVer.indexOf("Windows Vista") > -1)
{ 
return 'Windows Vista';
else if (appVer.indexOf("Windows NT 6.1") > -1 || appVer.indexOf("Windows 7") > -1)
{ 
return 'Windows 7';
else
{ 
try {
var _winName = Array('2000', 'XP', '2003');
var _ntNum = appVer.match(/Windows NT 5.\d/i).toString();
return 'Windows ' + _winName[_ntNum.replace(/Windows NT 5.(\d)/i, "$1")];
} catch (e) { return 'Windows'; }
} 
else if (_pf == "Mac68K" || _pf == "MacPPC" || _pf == "Macintosh")
{ 
return "Mac";
else if (_pf == "X11")
{ 
return "Unix";
else if (String(_pf).indexOf("Linux") > -1)
{ 
return "Linux";
else
{ 
return "Unknow";
} 
} 
this.OS = me.GetOSInfo(); // 获取操作系统类型
this.IeVer = null;
this.Bs_lang = (navigator.appName == 'Netscape' ? navigator.language : navigator.browserLanguage); // 浏览器语言版本
this.Bs_Name = me.GetBrowserName(); // 浏览器名称
// 获取浏览器版本号
if (this.Bs_Name == 'IE')
{ 
var _msie = appVer.match(/MSIE \d./i).toString();
this.Bs_Version = this.IeVer = _msie.replace(/MSIE (\d)./i, "$1");
else
{ 
this.Bs_Version = appVer;
} 
this.Ie6 = this.IeVer == 6 ? true : false;
this.Ie7 = this.IeVer == 7 ? true : false;
this.Ie8 = this.IeVer == 8 ? true : false;
} 
// 初始化客户端信息对象
var CMInfo = new ClientMentInfo();
// 解决IE6下背景图片缓存问题
if (CMInfo.Ie6)
{ 
document.execCommand("BackgroundImageCache", false, true);
} 
复选框全选功能与页面跳转及字符串处理// 设置复选框(checkbox)全选或全不选
function setAllCheckbox(formName, objName, num)
{ 
if (formName)
_arr = getObject(formName).elements[objName];
else
_arr = typeof(objName) == "object" ? objName : document.all(objName);
if (_arr)
{ 
if (num)
{ 
if (!_arr.length) // 若只有一个复选框,则length属性为undefined
_arr.checked = true;
else
{ 
for (var i = 0; i < _arr.length; i++)
{ 
_arr[i].checked = true;
} 
} 
else
{ 
if (!_arr.length) // 若只有一个复选框,则length属性为undefined
_arr.checked = false;
else
{ 
for (var i = 0; i < _arr.length; i++)
{ 
_arr[i].checked = false;
} 
} 
} 
} 
} 
// 使当前页面跳转到指定页码
function goPage(pageNum, pageStr)
{ 
window.location.href = "?np=" + pageNum + pageStr;
} 
// 分别去除字符串前后、左边、右边的空格
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, "") }
String.prototype.ltrim = function () { return this.replace(/^\s+/g, "") }
String.prototype.rtrim = function () { return this.replace(/\s+$/g, "") }
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/linyuanxing/archive/2008/12/01/3421058.aspx

注意:globalPara.js 是作者常用的包含各站点特定变量和常量的文件。如果不需要此类配置,请删除以下代码,否则会导致报错:


// 加载公共变量的JS


loadjscssfile(JS_PATH + "globalPara.js");


这两句代码,否则可能会引发错误。


(2009-06-04更新)


将 ClientMentInfo 类修改为兼容 IE6, IE7, IE8, Vista, Windows 7 和 Firefox 浏览器。

作者最新文章