JavaScript 進(jìn)度條實現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
更新時間:2009年07月21日 23:05:35 作者:
JavaScript實現(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)簽實現(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]
運行演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
js 獲取頁面高度和寬度兼容 ie firefox chrome等
這篇文章主要介紹了js如何獲取頁面高度和寬度并且兼容ie firefox chrome等主流瀏覽器2014-05-05js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
獲取頁面中元素到文檔區(qū)域document的橫向、縱向坐標(biāo),在js控制元素運動的過程中,對于頁面元素坐標(biāo)位置的獲取是經(jīng)常用到的,這里主要總結(jié)下兩種方法2013-05-05javascript設(shè)計模式 – 工廠模式原理與應(yīng)用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 工廠模式,結(jié)合實例形式分析了javascript工廠模式基本概念、原理、定義、應(yīng)用場景及相關(guān)操作注意事項,需要的朋友可以參考下2020-04-04小程序自定義單頁面、全局導(dǎo)航欄的實現(xiàn)代碼
這篇文章主要介紹了小程序自定義單頁面、全局導(dǎo)航欄的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03