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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]



相关阅读:
Javascript jquery css 写的简单进度条控件
网页作品:CSS主题网站欣赏
HTML验证的好处?
php获得文件扩展名三法
应对被公开的Oracle口令加密算法上
HTML5 Canvas标签使用收录
一个比较通用的分页控件,完整的设计时支持和比较流行的分页模式(提供源码下载)
ASP.NET State service状态服务的问题解决方法
win2003系统重装NTFS分区无法访问解决办法
WordPress博客数据库自动备份插件
DataList 中动态绑定服务器子控件的代码
一些文件未注册导致mssql表文件无法找开的解决方法
PHPCMS2008 SP4 心情排行指数不显示的解决办法
F#教程:向函数传入Record类型
快速导航

Copyright © 2016 phpStudy |