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

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

Javascript: 推荐:极酷右键菜单; 跟随鼠标旋转的文字; 拖动层效果，兼容IE和FF!; 由 element.appendChild(newNode) ,谈开去; 发个自己写的表格操作类(添加，删除，排序，上移，下移); 小议Function.apply() 之一------(函数的劫持与对象的复制); 小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能; JavaScript中令你抓狂的魔术变量; [原创]网络复制内容时常用的正则+editplus; createElement和onclick; 很有趣的一段textarea; 用 JavaScript 给站外链接的 cursor 进行改造; 一段好玩的JavaScript代码; IE中实现全屏广告代码，霸道无比.; phpwind放自动注册方法; 线路分流自动跳转代码；希望对大家有用！; 鼠标放在放在输入框上面提示效果; 常用js脚本; 硬盘浏览程序，保存成网页格式便可使用; Js的MessageBox

No. « ‹ 33 34 35 36 › »

技术文章搜索

关键字

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

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

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