JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)

Javascript: DOM相关内容速查手册; [转]JS宝典学习笔记; 背景，文字渐变（无闪屏）; 一个仿DOS的Loading效果; JavaScript使用prototype定义对象类型; 如何用JS获取带“\”字符串的中间值？; 如何识别上传前检测的图像是有效的方法; js模拟滤镜的图片渐显效果; 如何用javascript去掉字符串里的所有空格; javascript如何判断数组内元素是否重复的方法集锦; 控制打印时页眉角的代码; 模仿Flash AS效果的导航菜单; 页面自定义拖拽布局; js判断浏览器的比较全的代码; 又一日历输入效果没考虑兼容性，IE通过; 项目添加; [转]prototype 源码解读超强推荐; JAVASCRIPT对象及属性; JavaScript解决Joseph问题; 实例：用 JavaScript 来操作字符串(一些字符串函数)

No. « ‹ 48 49 50 51 › »

技术文章搜索

关键字

Javascript 中的 JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 398 ::

收藏到网摘: n/a

javascript 三级下拉选择菜单Levels对象 javascript 表单规则集合对象

JavaScript实现的进度条，可惜在Firefox等相似浏览器下不支持(远程）

复制代码代码如下:

[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]
运行演示代码:

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>JavaScript Data Access Test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<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);
//code from ruanchen.com
loading.interval();
},
addSubDIV: function(){
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>
<STYLE>.sub-loading { DISPLAY: inline
}
</STYLE>
<META content="MSHTML 6.00.6000.16850" name=GENERATOR></HEAD>
<BODY class=body>
<DIV id=parent></DIV></BODY></HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript 三级下拉选择菜单Levels对象 javascript 表单规则集合对象

Javascript 中的 JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)

评论 (0) All