JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)
更新时间:2009年07月21日 23:05:35 作者:
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 ES6中对象类型Sets的介绍与使用详解
这篇文章主要给大家介绍了关于Javascript ES6中Sets的介绍与使用的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
Javascript 构造函数,公有,私有特权和静态成员定义方法
其中公有方法声明的部分采用的两种方式,在实际应用中一般采取一种方式就可以了,如果两种方式都要采用的话,应注意顺序,防止前面写的方法被清空或覆盖。2009-11-11
JS中style.display和style.visibility的区别实例说明
下面的例子说明了这种区别:在这个例子中,divContent1和divContent2隐藏的时候用的是style.display=none,这时候,后面的div会向上移动,占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏,但是其隐藏后仍然占据原来的空间2013-03-03


最新评论