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的介绍与使用详解

    这篇文章主要给大家介绍了关于Javascript ES6中Sets的介绍与使用的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-07-07
  • javascript DOM编程实例(智播客学习)

    javascript DOM编程实例(智播客学习)

    最近一直在努力学习DOM编程这块,这是目前成就感最强烈的一块了,毕老师很认真的给我们讲解了相关知识,并在网上找了很多做的非常棒的网页作为例程给我们进行讲解
    2009-11-11
  • 微信小程序表单验证功能完整实例

    微信小程序表单验证功能完整实例

    这篇文章主要介绍了微信小程序表单验证功能,结合完整实例形式分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧,需要的朋友可以参考下
    2017-12-12
  • layer弹出层的关闭问题详解之在执行完毕后关闭当前弹出层

    layer弹出层的关闭问题详解之在执行完毕后关闭当前弹出层

    在前端页面中用layer打开窗口供用户输入或选择是非常常见的用法,但是有时为了完成一次操作,需要弹出多个窗口进行选择、输入或者提示,因此在关闭窗口的时候需要实现指定关闭任意窗口,需要的朋友可以参考下
    2023-10-10
  • 基于WebUploader的文件上传js插件

    基于WebUploader的文件上传js插件

    这篇文章主要为大家详细介绍了基于WebUploader的文件上传js插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Javascript 构造函数,公有,私有特权和静态成员定义方法

    Javascript 构造函数,公有,私有特权和静态成员定义方法

    其中公有方法声明的部分采用的两种方式,在实际应用中一般采取一种方式就可以了,如果两种方式都要采用的话,应注意顺序,防止前面写的方法被清空或覆盖。
    2009-11-11
  • JS中的Date()使用小结

    JS中的Date()使用小结

    Date() 日期对象是一个构造函数必须使用new来调用创建我们的日期对象,本文给大家介绍JS中的Date()使用小结,感兴趣的朋友一起看看吧
    2024-01-01
  • JS中reduce和map的优雅写法分享

    JS中reduce和map的优雅写法分享

    这篇文章主要为大家详细介绍了JavaScript中一些reduce和map的优雅写法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-03-03
  • JS中style.display和style.visibility的区别实例说明

    JS中style.display和style.visibility的区别实例说明

    下面的例子说明了这种区别:在这个例子中,divContent1和divContent2隐藏的时候用的是style.display=none,这时候,后面的div会向上移动,占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏,但是其隐藏后仍然占据原来的空间
    2013-03-03
  • Js中parseInt的使用及注意事项

    Js中parseInt的使用及注意事项

    parseInt是一种字符串转数字的,下面这篇文章主要给大家介绍了关于Js中parseInt的使用及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01

最新评论