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

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

Javascript: 动态改变图片尺寸（一）; JavaScript＋PHP 应用一：网页制作中双下拉菜单的动态实现; JavaScript + PHP 应用二：网页设计中树形菜单的动态实现; 在Javascript中为String对象添加trim,ltrim,rtrim方法; 纯JavaScript时钟; 网页之定时器详解; 为网页添加活动的背景音乐; Javascript Game; 实用的检测分辨率的程序代码; 【推荐】一个非常漂亮的列表框; 绝对精彩：在网页里做类似window右键的弹出式菜单; 怎样使网页中的元素可编辑??; JavaScript和Java的区别; 怎样编写IE和NN6通用的闪烁(blank)效果; 关于如何动态地在同一页面实现两个 < select > 互传 (s1 <==> s2); ＣＯＯＫＩＥ欺骗; 连串英文自动换行的方法; JavaScript中的正则表达式(1); JavaScript中的正则表达式(2); JavaScript窗口功能指南之定制新窗口

No. « 1 2 3 4 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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