複製代碼 代碼如下:[code]
<script type="text/javascript">
var loading = {
element: null,
count: 0,
ID: 0,
createLoading: function(parent, width, height){ //用於產生外圍的進度條框
loading.element = document.createElement("div");
loading.element.id = "loading";
loading.element.className = "loading";
loading.element.style.height = height;
loading.element.style.backgroundColor = "#ffffff";
loading.element.style.border = "1px solid #333333";
loading.element.style.width = width;
parent.appendChild(loading.element);
loading.interval();
},
addSubDIV: function(){ //用setInterval添加外圍框內的div標籤實現進度效果
//如果達到外圍框的寬度，則重新顯示進度
if ((loading.count + 1) * 2 >= parseInt(loading.element.style.width)) {
loading.count = 0;
clearInterval(loading.ID);
loading.element.innerHTML = "";
loading.interval();
}
else {
var elem = document.createElement("div");
elem.className= sub-loading ;
elem.style.backgroundColor = "#f00";
elem.style.width = "2px";
elem.style.height = loading.element.style.height;
elem.style.display="inline";
loading.element.appendChild(elem);
loading.count++;
}
},
interval: function(){ //反覆調用
loading.ID = setInterval(loading.addSubDIV, 30);
}
}
onload = function(){
loading.createLoading(document.getElementById("parent"), "402px", "15px");
}
</script>
[/code]
運行示範代碼:<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /><style>.sub-loading { DISPLAY: inline } </style><p><meta content="MSHTML 6.00.6000.16850" name="GENERATOR"><p>
