最近在看项目里的jsp代码，发现有些div里面的内容用<!-- -->注释掉了，本以为是多余的，去掉后才发现不是。
<div id="uploadMessageDiv" style="display: none">
<!-- <table align="center">
<tr>
<td align="center" class="titleText"><h3>正在上传文件</h3></td>
</tr>
<tr>
<td align="center">
<IMG src="${root }/images/loader.gif" align="top" border="0"/>
</td>
</tr>
<tr><td height="20px"></td></tr>
<tr>
<td align="center">
<font id="showMsg" style="font-size: 12;color: red">上传中请勿关闭此页面！</font>
</td>
</tr>
</table> --->
</div>
这段代码是针对上传文件时做的一个等待的过程，具体见下图：
附：loader.gif
js代码如下：
var tabDiv = document.getElementById("uploadMessageDiv");
var tabStr = tabDiv.innerHTML.slice(4, -3);
//滤镜 该方法见下面的windows.js
popFilterTableDiv({
popWidth:300,
popHeight:150
},tabStr);
分析一下，在这段html代码中，作者原意是不想这段被注释的页面直接显示，所以他先将他注释掉；然后他再在js代码中要用到的地方获取(用slice方法)这段代码（相当于作者将一个字符串预留在了页面上）；var tabStr = tabDiv.innerHTML;//就是获得被tabDiv对象包涵的页面文本；
然后又用slice(4, -3);来对这段取得的字符串进行处理；alert出来你会发现就是被注释的那段代码一个table.tabDiv.innerHTML.slice(4, -3);
1）start=4，就是说从字符串的第四个字符开始(包括第四个)选取字符串；
2）end=-3，就是说选取到字符串 从后面最后一个字符向前数第3个字符（不包括这个）；
-------------------------------------------------------------------------------------------------------------------
附windows.js
function $id(){
var elements = new Array();
for (var i = 0; i < arguments.length; i++){
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
function popupTips(obj){
var popupDiv = $id(obj);
popupDiv.className = "popupdiv";
popupDiv.style.marginLeft = "-" + popupDiv.clientWidth/2 + "px";
popupBg = document.createElement("div");
popupBg.setAttribute("id","popupbg");
pHeight = popupDiv.clientHeight;
bHeight = document.body.clientHeight;
bHeight=1024;
if(pHeight>bHeight){
popupBg.style.height = pHeight+300+"px";
popupDiv.style.marginTop = "-250px";
}else{
popupBg.style.height = bHeight+"px";
popupDiv.style.marginTop = "-" + popupDiv.clientHeight/2 + "px";
}
document.body.appendChild(popupBg);
hiddenSelect();
}
function closeDiv(obj){
popupBg.className = "hidden";
$id(obj).className = "hidden";
showSelect();
}
function hiddenSelect(){
if($id("leftcnt")){
var items = $id("leftcnt").getElementsByTagName("select");
for(var i=0;i<items.length;i++){
items[i].style.visibility="hidden";
}
}
}
function showSelect(){
if($id("leftcnt")){
var items = $id("leftcnt").getElementsByTagName("select");
for(var i=0;i<items.length;i++){
items[i].style.visibility="visible";
}
}
}
//外观，特效
//滤镜层
/**
* 弹出一个带表格的滤镜层
* param 滤镜层参数 json格式
* var param = {
* popWidth : 700,
* popHeight : 500,
* popBgColor : "white",
* bgOpacity : 0.6
* }
* table 传入一个table对象或者table的字符串
*/
function popFilterTableDiv (param, table) {
FilterDiv.buidFilterDiv(param, table, 1);
}
function popFilterMessageDiv (param, message) {
FilterDiv.buidFilterDiv(param, message, 2);
}
function removeFilterDiv(){
FilterDiv.removeFilterDiv();
}
FilterDiv={
bgDiv : null, //背景层
popDiv : null, //弹出层
msgTab : null, //消息容器
//参数相关
sWidth : window.screen.width,
sHeight : window.screen.height,
bgOpacity : 0.6, //背景层透明度
popBgColor : "white", //弹出层背景颜色
popWidth : 700, //弹出层宽度
popHeight : 500, //弹出层高度
//创建一个背景层
createBgDiv : function (bgOpacity) {
var bgDiv = null;
bgDiv = document.createElement("div");
bgDiv.setAttribute("id","bgDiv");
bgDiv.style.position="absolute";
bgDiv.style.background="#cccccc";
bgDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgDiv.style.opacity = bgOpacity;//设置透明度
bgDiv.style.top="0";
bgDiv.style.left="0";
bgDiv.style.height=this.sHeight+"px";
bgDiv.style.width=this.sWidth+"px";
bgDiv.style.zIndex="10000";
this.bgDiv = bgDiv;
return bgDiv;
},
//创建一个弹出层
createPopDiv : function (popWidth, popHeight, popBgColor) {
var popDiv = null;
popDiv = document.createElement("div");
popDiv.setAttribute("id","popDiv");
popDiv.setAttribute("align","center");
popDiv.style.background=popBgColor;
popDiv.style.border="1px solid #c51100";
popDiv.style.position="absolute";
popDiv.style.left = (this.sWidth-popWidth)/2;
popDiv.style.top = (this.sHeight-popHeight)/2;
popDiv.style.height=popHeight+"px";
popDiv.style.width=popWidth+"px";
popDiv.style.zIndex="10001";
//popDiv.style.marginLeft = "-225px" ;
//popDiv.style.marginTop = -75+document.documentElement.scrollTop+"px";
//<div style="background-color: blue;width: 100%;height: 100%"></div>
var titile = document.createElement("div");
titile.style.background="blue";
titile.style.width=popWidth+"px";
titile.style.height=popHeight+"px";
titile.setAttribute("valign", "top");
popDiv.appendChild(titile);
this.popDiv = popDiv;
return popDiv;
},
//创建一个message表格
createMessageTable : function (message) {
var msgTab = null;
msgTab = document.createElement("TABLE");
return msgTab;
},
removeFilterDiv : function (){
try{
//document.body.removeChild(this.msgTab);
document.body.removeChild(this.popDiv);
document.body.removeChild(this.bgDiv);
}catch(e){
alert(e);
}
},
//构造滤镜层
buidFilterDiv : function (param, obj, type) {
var popWidth = this.popWidth;
var popHeight = this.popHeight;
var popBgColor = this.popBgColor;
var bgOpacity = this.bgOpacity;
if(param != null){
if(param.popWidth != null || param.popWidth != undefined){
popWidth = param.popWidth;
}
if(param.popHeight != null || param.popHeight != undefined){
popHeight = param.popHeight;
}
if(param.popBgColor != null || param.popBgColor != undefined){
popBgColor = param.popBgColor;
}
if(param.bgOpacity != null || param.bgOpacity != undefined){
bgOpacity = param.bgOpacity;
}
}
var bgDiv = this.bgDiv;
var popDiv = this.popDiv;
if(this.bgDiv == null){
bgDiv = this.createBgDiv(bgOpacity);
}
if(this.popDiv == null){
popDiv = this.createPopDiv(popWidth, popHeight, popBgColor);
}
if(type == 1){
var objType = typeof(obj);
if(objType === "object"){
popDiv.appendChild(obj);
}else if(objType === "string"){
popDiv.innerHTML = obj;
}
}else if(type == 2){
}
document.body.appendChild(bgDiv);
document.body.appendChild(popDiv);
}
}