JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
更新時(shí)間：2009年07月21日 23:05:35 作者：
JavaScript實(shí)現(xiàn)的進(jìn)度條，可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程）
復(fù)制代碼 代碼如下:
[code]
<script type="text/javascript">
var loading = {
element: null,
count: 0,
ID: 0,
createLoading: function(parent, width, height){ //用于生成外圍的進(jìn)度條框
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添加外圍框內(nèi)的div標(biāo)簽實(shí)現(xiàn)進(jìn)度效果
//如果達(dá)到外圍框的寬度，則重新顯示進(jìn)度
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(){ //反復(fù)調(diào)用
loading.ID = setInterval(loading.addSubDIV, 30);
}
}
onload = function(){
loading.createLoading(document.getElementById("parent"), "402px", "15px");
}
</script>
[/code]
運(yùn)行演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
Javascript ES6中對(duì)象類型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
javascript DOM編程實(shí)例(智播客學(xué)習(xí))
最近一直在努力學(xué)習(xí)DOM編程這塊，這是目前成就感最強(qiáng)烈的一塊了，畢老師很認(rèn)真的給我們講解了相關(guān)知識(shí)，并在網(wǎng)上找了很多做的非常棒的網(wǎng)頁(yè)作為例程給我們進(jìn)行講解2009-11-11
這篇文章主要介紹了微信小程序表單驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了微信小程序完成表單驗(yàn)證功能所涉及的視圖與邏輯操作技巧,需要的朋友可以參考下2017-12-12
layer彈出層的關(guān)閉問題詳解之在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層
在前端頁(yè)面中用layer打開窗口供用戶輸入或選擇是非常常見的用法,但是有時(shí)為了完成一次操作,需要彈出多個(gè)窗口進(jìn)行選擇、輸入或者提示,因此在關(guān)閉窗口的時(shí)候需要實(shí)現(xiàn)指定關(guān)閉任意窗口,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了基于WebUploader的文件上傳js插件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
Javascript 構(gòu)造函數(shù),公有,私有特權(quán)和靜態(tài)成員定義方法
其中公有方法聲明的部分采用的兩種方式，在實(shí)際應(yīng)用中一般采取一種方式就可以了，如果兩種方式都要采用的話，應(yīng)注意順序，防止前面寫的方法被清空或覆蓋。2009-11-11
Date() 日期對(duì)象是一個(gè)構(gòu)造函數(shù)必須使用new來調(diào)用創(chuàng)建我們的日期對(duì)象,本文給大家介紹JS中的Date()使用小結(jié),感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript中一些reduce和map的優(yōu)雅寫法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
JS中style.display和style.visibility的區(qū)別實(shí)例說明
下面的例子說明了這種區(qū)別：在這個(gè)例子中，divContent1和divContent2隱藏的時(shí)候用的是style.display=none，這時(shí)候，后面的div會(huì)向上移動(dòng)，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏，但是其隱藏后仍然占據(jù)原來的空間2013-03-03
parseInt是一種字符串轉(zhuǎn)數(shù)字的,下面這篇文章主要給大家介紹了關(guān)于Js中parseInt的使用及注意事項(xiàng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01